
LEARN TO BUILD WITH HTML5’S BIGGEST TAG 


<canvas> 

Create: Animation Games Video Fonts and Applications without Flash 



CODE FASTER WITH 

MICROSOFT 

WEBMATRIX 

Leverage great tools for 
streamlining development 


RENDER 3D 
WEB OBJECTS 

Use Google SketchUp to 
plot and export models 


HOWTO 

Build a CSS3 3D image gallery 
Add animated sprites with EaseIJS 
Design repeating pixel art backgrounds 
Code an image slider header using jQuery 


WORDPRESS 3.3 
HAS ARRIVED! 

New features identified 
in our first-look roundup 
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DEDICATED SERVERS 

NEXT-GENERATION TECHNOLOGY FROM 1&1 



2 x16 CORE 

AMD OPTERON™ PROCESSOR 6272 


NEW AND EXCLUSIVE FROM 1&1: 


Choice of operating 
systems and features 


Speed: 

Unlimited traffic and 
more than 275 GBit/s 
global connectivity 


THE NEW 1&1 DEDICATED SERVER PORTFOLIO: 

m 

SERVER XXL 


NEW:1&1 SERVERS WITH 
INTEL PROCESSORS! 


OFFER ENDS 29/02/12! 


FASTEST SERVER TECHNOLOGY 
FOR PROFESSIONALS! 


SERVER 

4i 


SERVER 
XL 6 


32 CORE 


Free 24/7 technical 
support 


■ Intel® Xeon® E3-1220 


■ AMD Hexa-Core 


■ 2 x AMD Opteron™ 


I 4 Cores with up to 3.4 GHz 
I12GBECC RAM 
11,000 GB RAID 1 with 
2 x 1.000 SATA HDD 


I 6 Cores with up to 3.3 GHz 
I16GBECC RAM 
11,000 GB RAID 1 with 2x1,000 
SATA HDD 


6272 (Interlagos) 

2x16 Cores with up to 3.0 GHz 
64GBECC RAM 
2,400 GB RAID 6 with 
6x600 SAS HDD 


internet! 


Call 0844 335 1211 or buy online 


Visit us at 
www.1and1.co.uk 
to see our complete 
range of servers 



www.landl.co.i 


1&1 Dedicated Servers: Server 4i at £59.99/month; Server XXL 32 Core at £399.99/month; Server XL 6 at 3 months free, then £99.99/month (12 month minimum contract term applies). A one-time set-up fee of £99 applies 
(£49 for Server 4i). Prices exclude VAT. 
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! To be the most accessible and 
inspiring voice for the industry, 
offering cutting-edge features 
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Highlight 



I think 2011 has 
been our strongest 
year, creatively. I 
think we’ve done a 
lot of things that 
have all given us 
slightly different 
dimensions if 

The sweet smell of success 
described by the guys at 
Stinkdigital. Page 30 


Are you ready to grapple with the most important tag in web design? 


f you had to pick the most vital 
element of next-gen web standards, 
you might feel spoilt for choice. 

There’s obvious appreciation to be 
JjjjSjH. had for Semantic layout tags, APIs 
:: ::::: ::: for offline storage, web fonts via 

@font-face and, of course, all of CSS3’s 
amazing graphical effects. But for all 
of HTML5’s wonders, there is one deceptively simple 
tag that has arguably done the most to change the 
game completely. The <canvas> element at its core is a 
wrapper that, in a sense, lets you paint by numbers into 
a predefined space in your page and, crucially, the 
browser. It’s a key contributor to the degradation of 
technology like Flash, facilitating some jaw-dropping 
demonstrations of animation, game design, graphical 
applications, video rendering and even 3D work. 


While it might be true that Canvas relies heavily on 
JavaScript to do the grunt work, the possibilities really 
do begin and end with this ability to natively 
dynamically draw and refresh graphics without 
third-party plug-ins. So this month we focus on this one 
tag and provide a detailed analysis of what makes it tick 
with guest expert Rob Hawkes, who has quite literally 
written the book on developing with Canvas. 

Alongside that the excellent Mark Shufflebottom 
takes those concepts a stage further with a step-by-step 
guide to creating interactive animations for HTML5 
Canvas. From page 48 he’ll be leveraging the EaseIJS 
framework that offers up some distinctly Flash-like 
performance. As ever we would love 
to hear from you; tell us about your 
favourite Canvas-based sites or why 
not show us your own efforts? 



##The<canvas> 
element at its core is 
a wrapper that, in a 
sense, lets you paint 
by numbers ii 


Follow us on Twitter for all the news & conversation @webdesignermag 
Visit our blog for opinion, freebies & more® www.webdesignermag.co.uk 
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Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

^ Steve Jenkins, Features Editor 
Mark Billen, Editor 
^Steven Mumby, Designer 
^Adam Millward, Senior Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 
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| contributors 


This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


This month he 
shows you how to 
quickly get to grips 
withSketchUp 



Experienced 3D designer and CAD jockey Robin de Jongh has written two 
books on Google SketchUp - so it’s safe to say he knows his stuff! This 
month he shows you how to quickly get to grips with the program and 
take your first steps with one of 2012’s biggest buzz trends - creating a 
web-ready HTML5 logo in just a few easy steps. Page 64 




Rob is addicted to visual 
programming and loves 
HTML5 and JavaScript. A 
technical evangelist at 
Mozilla. leading the gaming 
side of their work, he’s also 
the author of Foundation 
HTML5 Canvas- and that’s 
why he’s here! Page 38 



Chris is a freelance 
commercial designer and 
illustrator with 14 years’ 
experience working for 
global brands like Lucas 
Films, Aardman, Nike and 
Sony. This month he’s here 
to explain pixel art design 
technigues from Page 60 



Mark is an Adobe Education 
Leader and programme 
co-ordinator of BA (Hons) 
Interactive Media 
Production at Bournemouth 
University. This issue he 
gets involved in our Canvas 
coverage with a special look 
at using EaseIJS. Page 48 


Neil Pearce 


Sam Hampton-Smith Matt Gifford 



Neil is a designer and 
front-end developer based 
in Essex. He returns this 
month with the second of a 
two-part tutorial on how to 
design and build an image 
slider using jQuery, HTML5, 
CSS3 and, of course, a bit of 
Photoshop. Page 56 



A keen supporter of web 
standards, Sam loves getting 
the most out of HTML and 
CSS. When not writing for 
Web Designer, he runs a 
graphic design agency in 
Scotland and you can follow 
him on Twitter via the 
username @samhs. Page 52 



Matt is a lead RIA consultant 
developer who specialises 
in ColdFusion, Flash and AIR 
development. With over ten 
years’ industry experience 
across various sectors, he is 
a regular presenter at 
national and international 
conferences. Page 82 


Eric Freeman 


Alongside Elisabeth Robson, 
Eric is co-author of the 
books Head First HTML & 
CSS and Head First HTML5 
Programming. A computer 
scientist and former CTO of 
Disney.com, this month he’s 
here to offer a starter guide 
to JSON coding. Page 86 


Simon Bisson 


With a background in IT and 
engineering, Simon is a 
highly respected 
technology journalist. This 
issue he’s kicking off our 
new development section 
with a feature overview of 
Microsoft’s WebMatrix 
developer tools. Page 78 




4 


meta 



Got 
web skills? 


We’re always looking for the 
hottest web-design talent. Email 
webdesigner@imagine-publishing.co.uk 
with examples of your creative work 


L 


designer 

Imagine Publishing Ltd 
Richmond House, 33 Richmond Hill 
Bournemouth, Dorset, BH2 6EZ 
+44 (0)1202 586200 
Web: www.imagine-publishing.co.uk 
www.webdesignermag.co.uk 

Magazine team 

Editor Mark Billen 

mark.billen@imagine-publishing.co.uk 
01202 586251 

Editor In Chief Dave Harfield 
Features Editor Steve Jenkins 

steve.jenkins@imagine-publishing.co.uk 
01202 586233 

Designer Steven Mumby 
Senior Sub Editor Adam Millward 
Head of Design Ross Andrews 

Contributors 

Ashraf Al-Karmi, Simon Bisson, Eric Freeman, Matt Gifford, 

Sam Hampton-Smith, Rob Hawkes, Alex Iszatt, Robin de 
Jongh, Ross Linnett, Chris Malbon, Neil Pearce, Elisabeth 
Robson, Mark Shufflebottom and Adam Smith 

Advertising 

Digital or printed media packs are available on request. 

Advertising Director James Willmott 
01202 586432 

james.willmott@imagine-publishing.co.uk 

Head of Sales Hang Deretz 
01202 586442 

hang.deretz@imagine-publishing.co.uk 

Advertising Manager George Lucas 
01202 586421 

george.lucas@imagine-publishing.co.uk 

Advertising Sales Executive Richard Rust 
01202 586436 

richard.rust@imagine-publishing.co.uk 

Cover disc 

Head of Digital Mat Toor 

Digital Projects Co-ordinator Steven Litton 

Multimedia Editor Matt Deeble 

WDxtrahelp@imagine-publishing.co.uk 

International 

Web Designer is available for licensing. Contact the 
International department to discuss partnership 
opportunities. 

Head of International Licensing Cathy Blackman 
+44 (0) 1202 586401 
licensing@imagine-publishing.co.uk 

Subscriptions 

Head of Subscriptions Lucy Nash 
subscriptions@imagine-publishing.co.uk 
To order a subscription to Web Designer: 

0844 848 8413 
+44 1795 592 878 

Email: webdesigner@servicehelpline.co.uk 
13-issue subscription (UK) -£62.30 
13-issue subscription (Europe) - £70 
13-issue subscription (ROW) - £80 

Circulation 

Head of Circulation Darren Pearce 
01202 586200 

Production 

Production Director Jane Hawkins 
01202 586200 

Founders 

Group Managing Director Damian Butt 

Group Finance & Commercial Director Steven Boyd 

Group Creative Director Mark Kendrick 

Printing & Distribution 

Printed by Wyndeham Heron Ltd, Bentalls Complex, 

Colchester Road, Heybridge, Maldon, Essex CM9 4NW 

Distributed in the UK & Eire by Seymour Distribution, 2 East 
Poultry Avenue, London, EC1A 9PT 0207 429 4000 

Distributed in Australia by Gordon & Gotch, Equinox 
Centre, 18 Rodborough Road, Frenchs Forest, NSW 2086 
61 2 9972 8800 

Distributed in Rest of the World by Marketforce, Blue 
Fin Building, 110 Southwark Street, London SE1 OSU 
0203 148 8105 

Disclaimer 

The publisher cannot accept responsibility for any unsolicited material 
lost or damaged in the post. All text and layout is the copyright of 
Imagine Publishing Ltd. Nothing in this magazine may be reproduced 
in whole or part without the written permission of the publisher. 

All copyrights are recognised and used specifically for the purpose 
of criticism and review. Although the magazine has endeavoured 
to ensure all information is correct at time of print, prices and 
availability may change. This magazine is fully independent and 
not affiliated in any way with the companies mentioned herein. 



IMAGINE 

PUBLISHING 


© Imagine Publishing Ltd 2012 
ISSN 1477-3534 


PPA 


recycle 

When you have finished with 
this magazine please recycle it. 





















































































(®j depositphotos 

Your One-Stop Image Solution 

WE'VE GOT IMAGES 
FOR ALL OF YOUR IDEAS 

Get 74-day image subscription for FREE 
with promotion code: 

S515781 





www.depositphotos.com 


Depositphotos Inc., 110 E. Broward Blvd., Suite 1700, Fort Lauderdale, FL 33301, USA 11-954-990-0075 








Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 

0webdesigner@imagine-publishing.co.uk 0 @WebDesignerMag ©www.webdesignermag.co.uk 


Inside... 

22 Lightbox 

Three more sites added to our favourites list 

30 Pro file: Stinkdigital 

Creative aromatherapy from this London lot... 

Cover: HTML5 Canvas 

Rob Hawkes gets graphic with HTML’s top tag 

68 Design cloud 

Take inspiration from 24 awesome infographics 

90 Blog beautiful 

Six dark designs you shouldn’t make light of 

94 Portfolio 

Featuring Michele Giorgi and Natalia Robba 

98 Talent directory 

Charting the best agencies in the business 

102 Hosting listings 

Get yourself a new home for the New Year 


114 Style relic: Adobe.com 

The changing web styles of a software giant 



Discussing the hottest topics 
from the web-design world 

8 WordPress hits 3.3 


Evaluating the updates to blogging’s best 

10 Inactive Twitter usernames 

Why should popular monikers lie dormant? 

12 Crowdsource 

Your letters, tweets and comments answered 

14 Comment: Ashraf Al-Karmi 

Tackling HTML5 video inconsistencies head on 

16 Comment: Ross Linnett 

Recite Me founder on better web accessibility 

18 Webkit 

Opening up a big can of seriously cool kit! 



Cover focus 

HTML5 Canvas: 
step inside the tag 
that floored Flash 


Expert author Rob 
Hawkes offers a 
look at the HTML5 
element which is 
fuelling the next- 
gen revolution 


WordPress 3.3 Image slider headers 

Comment and reaction to the blogger’s new version Add HTML and jQuery to last month’s design 



Pro file: Stinkdigital 

We sniff out what makes this agency such a success 
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. M$M 
•• MMI 

Lightbox 

Measuring slavery footprints and font love 





















On the free CD 


:tutorials> 


112 Discover what your latest disc has to offer 




Designer resources including 
some essential HTML5 re 

• Angelo HTML template worth $12 

• 70+ minutes of AS3 video guides 

• 2 HTML5 sample book chapters 

• Centolis Magazine WP theme 

3D CSS3 SLIDESHOW 


Canvas with EaseUS 


3D galleries with CSS3 

Give your average 2D lightbox a twist 


Pixel Art backgrounds 3D models with SketchUp 

Super-cool vector-based backdrops Robin De Jongh builds 3D web objects 


■ 




NEW! Dedicated 12-page 
section offering features 
and tutorials for coders 



Microsoft* 

WebMatrix 


78 

Feature 

Inside WebMatrix 


m Wet Gallery 



Site From Template 


Simon Bisson has the lowdown on the lightweight 
web platform that’s perfect for solo developers 



Web gurus take you step-by-step 
through professional techniques 

48 Get interactive with HTML5 

Canvas and EaseIJS 

Make a Flash-like animated character with this super tag 

52 Create a 3D image gallery with 
CSS3 to showcase your work 

Introduce a new dimension to your online portfolio 

56 Build an image slider header: part 2 

Prepare your Photoshop header for the web with 
a little HTML5 and the jQuery WOW Slider plug-in 

60 Design your own isometric 
pixel-based backgrounds 

Vibrant vector images to give your site a new lease of life 

64 Create a web-ready 3D logo 
with Google SketchUp 

Robin de Jongh walks you through the process of taking 
the HTML5 logo to another level with this simple program 

82 Getting to grips with Ruby on Rails 

Master this powerful MVC framework to make a blog app 

86 An introduction to JSON: part 1 

Follow our starter guide to manipulating JavaScript 
objects with JSON before adding Twitter support 


Web workshop 

Re-creating the web’s hottest styles 



70 



Get that vintage illustration look, 
inspired by www.ryanscherf.net 


Mark Shufflebottom uses one artist’s portfolio to show 
that good old-fashioned design never goes out of style 


72 Cutting-edge web logo trends 
with www.kommunikat.pl 

With brands keener than ever to stand out from the 
crowd, logo design seems to be recession-proof 


74 Fixed headers and web fonts 
explored, plus the Kitchen Sink 

We pull the plug on Kitchen Sink Studios’ site to reveal 
just how powerful a mix of vintage and modern can be 
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Discussing the hottest topics in the web-design world 

If you have a creative project new web product or great designer story, contact the editorial desk 

0 webdesigner@imagine-publishing.co.uk Q@WebDesignerMag 


WordPress hits 3.3 

The world’s most popular blogging platform once again ups the 
ante, adding a host of new features to stay ahead of the pack 



T he ever-evolving WordPress 
platform is always worthy of 
a mention and the latest 
incremental upgrade - 3.3 - 
brings with it a variety of updates and 
improvements that will undoubtedly 
make us love it even more. Following 
tradition WordPress 3.3 has been named 
Sonny, in honour of the great jazz 
saxophonist Sonny Stitt, and has over 5 
million downloads already in the bag. 

So, what does WordPress 3.3 have to 
offer? There are a number of notable 
new additions including an improved 
Dashboard design, ideal for boosting 
workflow, a streamlined image 
uploader, more efficient co-editing, 
the inclusion of a Tumblr importer, 
better widget management and a 
Welcome option - especially 
helpful for those who have yet to 
sample the delights of WordPress. 
These are just the improvements 
that users will find on the surface 
though. Under the hood hasn’t 
been forgotten either and WP 
developers and enthusiasts can 
tinker with the improved Editor API, 


create a postname permalink structure 
without a performance penalty, find 
jQuery 1.7.1 and jQuery Ul 1.8.16 included 
and get to grips with an improved 
Metadata API. Over the page we look at 
the enhancements in a bit more depth. 

If you haven’t made the jump to 3.3 yet 
now’s the time to upgrade. 

What’s coming next? Ever forward- 
thinking, version 3.4 is already out in 
alpha and looking to add even more 
incremental upgrades. At this point in the 
development cycle it’s hard to pinpoint 
exactly what will be included in the next 
iteration, however it would seem a 
replacement of the default theme to be 
called Twenty Twelve (it’s currently Twenty 
Eleven) is on the cards. 

This is corroborated by a comment on 
the official blog from the development 
team of the WP open-source project. This 
suggested ‘a combination of front-end 
features, Dashboard features and 
under-the-hood improvements all tied to 
managing your site’s appearance will be 
the focus of 3.4.’ Looks like our favourite 
web-publishing platform is only going to 
get better and better. 


Readers’ 

tweets 


Web Designer posed the question: ‘What features/ 
improvements would you like to see in the next 
version of WordPress?’ Here’s what a couple of 
our followers had to suggest... 


Jason 

@Jason02irl 

@WebDesignerMag [I'd like] 
better image management 
and better website 
customisation 


Toby James Pestridge 

@TobyPestridge 

@WebDesignerMag I'd like to see 
an easy way of creating default 
#WordPress install packages, 
preloaded with fave plug-ins 
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Dashboard 

T he main admin area where the 
Word Press user gets to spend a 
lot of time has been given a little 
pep talk and now makes the user 
workflow just that little bit easier. Taking 
a lead from the world of web-design 
trends, the Dashboard now boasts 
responsive design. What does this mean 
in real terms? Well, it means that the 
Dashboard now has a liquid layout that 
resizes according to the screen resolution. 
While not a groundbreaking feature in 
itself the same principle applies to the 
menu system which automatically 
collapses to the icon-only appearance as 
the browser window shrinks - a simple 
but effective addition that is welcomed. 

Sticking with the menu system the 
fly-out tabs are a definite plus-point and a 
feature that has taken surprisingly long to 
make it on to Word Press. 


Image uploader Admin link 


I mages have always been an 
integral part of the WordPress 
experience, but the process of 
uploading and inserting has never 
been as smooth as it could, or should, 
be. The latest upgrade goes some way 
towards remedying this by offering a 
more productive drag-and-drop image 
uploading system. 

The previous Upload/Insert button 
has now been amalgamated with its 
counterparts to be condensed into a 
single Upload/Insert Media button. 
Calling the button in to action reveals a 
new drag-and-drop area, built using 
HTML5, which allows users to simply 
drag an image for instant download. The 
old Select Files and Browser Upload are 
still there if you need them though. We 
are hoping this is just the beginning of 
improved image management. 





Welcome to your new 

if you need help gelling started. chi 
people dp first wrtien they Ml up 9 r 
your current screen and where to gi 


Easy life 


W orking within a post is 
typically where it’s at for 
most WP users and any 
workflow improvements are always 
welcome. The upgraded Admin bar is 
definitely a notch up from version 3, and 
does make the post creation process and 
general workflow a little smoother. There 
are one-click links to comments, updates, 
WordPress documentation and common 
tasks such as New>Post, Link and Media. 

The Admin link now combines Edit My 
Profile and Log Out, an unnecessary step 
in our opinion. There is now no direct Log 
Out link - Web Designer liked that - and 
with the Edit My Profile link sitting at the 
top of the list there is always the chance 
of a misclick and redirection. To us this 
seems like WordPress is trying to be a bit 
too clever. It’s a very minor point, but one 
we would like to see resolved. 


W ordPress users cover a 

large spectrum of skillsets, 
from beginners to experts, 
and a couple of new additions cater 
for all levels. For first-timers, newcomers 
or even upgraders there is the new 
Welcome screen which offers quick links 
to common tasks with a single click. 

Under the hood, the WordPress core 
has been updated to jQuery 1.7; this 
means that developers can produce 
add-ons safe in the knowledge that they 
will work as intended. Elowever, the 
downside is that some plug-ins/add-ons 
may not be compatible with this version 
of jQuery - so it’s worth checking and 
testing any active plug-ins to make sure 
there are no issues. If there are, check to 
see if there is an update to any problem 
plug-ins; contact the author if there isn’t 
or search for an alternative. 


<comments> 



“As someone who spends most of my day in the backend of WordPress sites I’m very happy and 
impressed with the usability enhancements I’ve seen in version 3.3 - notably the new hover menu 
navigation system to get to specific WP pages quicker. Us theme developers are also really excited by 
the new pointer tips and better ways to hook into the help screens to document our themes and 
plug-ins better from within the WordPress Dashboard itself. Hopefully this will help to reduce the 
demand for support as it increases the ease-of-use of our products.” 

Mark Forrester, WooThemes co-founder 



“WordPress stays on target; that was my primary verdict of WordPress 3.3 when I started using the 
nightlies, then the betas and now the final version (or the first-point release, 3.3.1, actually). While the 
Admin interface has got a nice and well-deserved cleanup and the new media uploader is a lot more 
user friendly, there really is no news of epic proportions here. It’s just another solid release, fine-tuning a 
publishing platform that continues to grow both in use and features. Maybe that is something of a 
problem as well - maybe there is a risk of getting stuck in a familiar rut? Groundbreaking features and 
new ways of thinking rarely appear in well-established software; these come from the challengers. 
Which is fine, I guess - after all. the post formats introduced previously are a Tumblr ripoff. I’m not too 
worried though. WordPress continues to improve and to evolve, and although I doubt we’ll see 
WordPress break any new ground in terms of features and trends in the future, it has proven that 
it can adapt if it needs to. And, if nothing else, there are always plug-ins.” 

Favourite new feature: “The cleaned-up Admin bar, which was such an eye-sore previously” 

Thord Daniel Hedengren, WordPress author/expert 



WordPress Download Counter 

WordPress has had over 65 million downloads 
since version 3.0 was released and the latest 
version is well past the 5-million mark and will 
probably be nearing the 6-million mark by the 
time you read this. To get the latest download 
count for WordPress 3.3 head over to http:// 
wordpress.org/download/counter. 
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| news 


Discussing the hottest topics in the web-design world 



The king of micro-blogging is home to millions of inactive accounts 
hoarding sought-after usernames. Web Designer checks out Twitter’s 
policies and endeavours to find out how to get your hands on one 


t witter has over 450 million registered 
accounts, and around ten new accounts 
are registered every second according 
to statistics from Twopcharts (http:// 
twopcharts.com). This not only 
demonstrates the sheer scale of the Twitter 
phenomenon, but also reveals exactly how many 
Twitter usernames have been called in to action. 

However, registered accounts and active accounts 
are two very different beasts. Figures and opinions vary 
as to what counts as an ‘inactive account’. The simple 
answer would seem to be if a tweet hasn’t been placed 
on an account for 12 months then it has been inactive 
for a year. This is only one scenario, however. As Twitter 
itself states on its website: To keep your account active, 
be sure to log in and tweet (ie post an update) within six 
months of your last update’ but it also goes on to say, 
‘You may not be able to tell whether an account is 
currently inactive’. To read Twitter’s Inactive Account 
policy in full visit http://tinyurl.com/twitinactive. This 
effectively answers four questions: what is Twitter’s 
inactive username policy; how does Twitter determine 
inactivity; what if a potentially inactive account is using 
my registered trademark as its username or account 
name; and what if I have a request for a username from 
an account that looks inactive, but I don’t have a 
registered trademark. It’s hardly a comprehensive 
policy, but it does offer some official guidelines. 

Looking beyond the specifics of what actually 
amounts to an inactive account there is thought to be 
literally millions of accounts that are simply not 
tweeting. Twitter doesn’t release any official figures on 
accounts, which makes it very difficult to gauge exact 
numbers. Nevertheless, figures from various web 


sources have suggested that less than 50 per cent of 
accounts are active. On this basis alone that would 
mean there are over 200 million accounts holding a 
name that cannot be used. Even a more conservative 
estimate of 10 per cent would still see over 40 million 
usernames unavailable for use. 

Web Designer readers have said Twitter (©support 
can be contacted and they will release a name if 
requested, while Twitter’s policy says, ‘We are currently 
working to release all inactive usernames in bulk’. We 
decided to test the water and contacted them with a 
request for a username that has been inactive for nearly 
two years. The response was as follows: 

‘Hello. We are not releasing inactive usernames. If 
you hold the trademark on the term you can file a ticket 
here: http://support.twitter.com/forms/trademark. 
Thanks.’ Going on this reply, it would seem Twitter’s 
Inactive Account policy is not exactly as stated. 

An alternative solution, which was once again 
suggested by our dedicated band of followers, is to 
contact Twitter via its form for impersonation (https:// 
support.twitter.com/forms/impersonation). This does 
involve a degree of duplicity, but it would almost 
guarantee a fast response. Another route is to head 
to https://support.twitter.com/forms/general, a 
general-purpose form for support. The Regarding 
drop-down list includes Inactive usernames along with 
the option to describe the problem and add a phone 
number; while this is an approach we have tried, at the 
time of writing, we are still waiting for a response. 

Going back to the reply Web Designer received from 
Twitter, we decided to take a look at the trademark 
policy. This states: ‘Using a company or business name, 
logo or other trademark-protected materials in a 


manner that may mislead or confuse others with regard 
to its brand or business affiliation may be considered a 
trademark policy violation.’ Hardly applies to those 
looking to obtain an inactive name though, does it? 

The Twitter developer blog has a long-running thread 
instigated by Len Kendall, a director at holistic 
communications firm GolinHarris. He suggests a 
‘revamp of Twitter’s policies on inactive usernames’. 
Web Designer contacted Kendall to get his thoughts on 
the system (see comment over the page). 

There’s no doubt that the holding of an inactive 
Twitter username that could be put to use elsewhere 
and given a real purpose is an annoyance that needs to 
be resolved. Twitter simply telling us that it is not 
releasing usernames unless there’s a trademark issue 
seems at best short-sighted, and at worst, potentially 
damaging to the company’s reputation. 

Is Twitter frightened that if it releases inactive 
usernames its registered accounts will drastically drop, 
revealing the network’s true worth to investors and 
advertisers? Or is it simply in the process of creating a 
new policy to appease users? There is potentially 
money to be made (eg domain name-style auctions) 
and there must be a solution to suit all. But what we 
really want to know is: when is any decision going to 
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Len Kendall 

Director of Digital at GolinHarris. 
Also co-founder of the3six5 
project and HeyGisto 
@LenKendall 


The Twitter user base has grown exponentially since 

2006, but the reality is that a large chunk of ‘users' aren’t 
active. While I can only speculate, I have to imagine that if 

Twitter was to purge all inactive accounts today, there would be 

a dramatic decrease in the number of actual users. The latest I've 

read claims that number might be half. Obviously that would be 

a big hit in wooing media, investors and, of course, new users. 

“Speculation aside, it’s important for Twitter to help address 

this issue with its most passionate users (like myself), who have 

actively tried to secure Twitter handles that have been wasted 

for years. While it might seem like the process of clearing names 

isn't financially beneficial for Twitter, I would argue there is a 

wav to make it worthwhile for both them and all of us. 

“I propose that Twitter creates a kind of auction system for 

inactive Twitter usernames that have gone unused for, say, over 

a year. Essentially any name which goes past the 12-month mark 

would automatically be put into the Twitter auction system that 

anyone could subscribe to. A handle would be available for 

purchase for one month and an eBav-stvle bidding system 

would let people submit a bid up to the end of the listing. The 

highest bidder would then pay Twitter for the rights to the name 

and be given a contract to sign assuring all parties that the name 

would not be resold in any form of aftermarket. 

“This would help prevent the kind of mess web domains are 

currently in when it comes to hoarding/reselling URLs, but give 

veteran Twitter users the chance to finally secure the name 

they’ve always wanted. Not only would this likely recoup the 

admin costs that Twitter would accrue, but it would 

probably even make them a tidy profit in the long term. 


Readers 

tweets 


This is a very contentious 
issue among Web Designer 
readers. Below is a selection 
of their views... 


r VS/ Hammond 

@rwhammond ^ 

OWebDesignerMag 
fontacted Twitter me 


@\A/^DesignerMag^Yesd’ve^^ 

contacted Twitt m^ replYj 
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Shaun Barrio 

@ShaunBarrio 
@WebDesignerMag Use 
impersonation claim for fast 
response. If account has been 
inactive >6 months it should work 


Jon L Don 

@jonldon 
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Bite-sized coverage of the month’s trending topics 

New tools for Fire!ox ^ 

The latest beta of Firefox includes a host of new tools for 
web designers/developers. On offer is the Full Screen 
API which works with any HTML content, Page Inspector, 
which makes it easier to test the design, style, font, 
colour and page positioning of a site and Style Inspector 
to view CSS properties applied to a page element. Get 
the beta from www.mozilla.org/en-US/firefox/beta. 


USB 3.0 

The superfast connection on ^ 
tablets by the end of 2012 

Firefox 

3,395 lines of CSS code and335lines of JavaScript 
code. See it here: http://tjrus.com/iphone 

CSS3iPhone 4 


Google 



Microsoft not to 
support Flash 
on Metro 


iPad 3 

Could be here as soon as March 2012 


Google refreshed 

Google announced at the 
end of 2011 that as part of its 
ongoing redesign its famous 
home is to get a makeover. 
This is expected to be with us 
very soon and is to include a 
new Google bar. The black bar 
at the top of the page will have 
a drop-down menu nested 
h under the Google logo with 
links to popular services. 
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Your emails, tweets, forum comments. The social network but in print 

This month we discuss what Web Designer could offer its subscribers, Google's redesign and some HTML5 guidance 


HTML 



There has definitely never been a 
better time to embrace HTML5, 
with it set to be the premier web- 
design standard from now on 



Download 
the podcast 
today 

Search for Web 
Designer on iTunes 
or download it 
directly from our site 


Episode 13 
Chris Barling 

Actinic chairman 
HBH and co-founder 
■*1 Chris Barling talks 
about eCommerce and how 
consumers will be doing 
their shopping in the future. 


Episode 12 
Elliot Jay Stocks 


I Web fonts, 
typography, HTML5 
1 and CSS3 all receive 
the Elliot Jay Stocks 
treatment in this episode. 


Episode 11 
Jan Cavan 


I Web Designer talks 
about Word Press 
I and web design with 
Dawghouse Design Studio 
owner and SendGrid Ul 
designer Jan Cavan. 


subject Will Google’s facelift perk up plus? 

From Patrick MeAffety 


YouTube and Twitter have both had new redesigns Thanks for writing in, Patrick. Of course, the 

and the Google homepage is about to get one too, so I redesign of a major web presence is never going 
have read. The purpose of a redesign is to offer the to meet with full approval. All the sites you have 

user a better experience and I guess that a lot of mentioned have millions of visitors on a daily basis 

research has gone in to getting the right elements and appeasing everyone would be impossible, 

included. However, I can’t help but wonder if Google’s There’s no doubt that all will have done a lot of 
almost desperate efforts to promote Google+ (in the research and concluded that the decisions they 
pics I’ve seen of the redesign) suggest that the world’s have made are the right ones. Whether a user likes a 
largest search engine’s attempt at being social is not redesign or not rarely makes a difference and, after 
as popular as they had hoped. I don’t use Google+ and an initial settling-down period, most users grow to 

can’t see any reason to make the switch yet, so what I like the new version. Whether Google is trying to 

would like to see in the redesign is the option to force its social platform on us is a matter of opinion, 

customise the menu and get rid of Google+. If you don’t like it, you may just have to ignore it. 




s..bject Subscriber 
specials? 

From Martin Kennedy 


I’ve been a subscriber for a long 
time and enjoy the magazine 
very much - keep up the good 
work! However, I do have two 
points that I’d like to make: 

1. To reiterate other reguests, 
what about giving your loyal 
subscribers an area to access/ 
download previous copies of 
Web Designer in PDF or 
e-version formats? Access could 
possibly be achieved using the 
magazine subscription number 
and/or registration details? 

I have to point out that your 
rival magazine, .net(to which I 
also subscribe), has a premium 
area on its website that allows 
download access to all previous 
issues as PDF documents for any 
.net subscribers. 

So, come on, Web Designer, 
how about rewarding your loyal 
magazine subscribers? 

2. Could we please, please, please 
have a month and year printed 


on the front and spine of the 
magazine? It makes it so much 
easier when cataloguing past 
copies of Web Designer in my 
magazine library. It will also align 
your title with all the others on 
the market. 

Let’s start by saying that we’re 
glad you like the magazine, 
Martin! Thank you for your 
long-term support as well as 
writing in with your feedback. 

Your first point is 
undoubtedly a valid one and 
our subscribers are highly 
valued. Your suggestion is 
currently under consideration 
and we hope to see it realised 
sooner rather than later. 

The use of issue number 
rather than date is a company¬ 
wide policy based on the fact 
that we release 13 issues a year 
rather than 12 ‘monthly’ issues. 
Adding a month and year would 
complicate the number/naming 
process as at least two issues 
would have the same month 
and year leading to confusion. 


subject Joining the 
HTML5 party 

From Sara Gee 


HTML5 seems to be where all 
the action is and, as a relative 
newcomer to web design, I 
thought I should try and discover 
what it is all about. 

I know there is a host of new 
tags but I have little clue as to 
how they should be used. Any 
suggestions or pointers that will 
help get me started on the road 
to HTML greatness? Thanks in 
advance for any help. 

There are plenty of resources 
and books to help grasp the 
concepts of HTML5, Sara. It’s 
not that far removed from 
HTML4, but there is still plenty 
to get your head around. A 
good book to kick off with 
is Smashing HTML5 by Bill 
Sanders. This introduces 
HTML5 and the new tags before 
showing real-world examples. 

In addition to this, Dive Into 
HTML5 is a great online guide 
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Join the conversation as it happens on Twitter Q @webdesignermag 
Comment on the news and opinion ® www.webdesignermag.co.uk 
Email the editorial team at @ webdesigner@imagine-publishing.co.uk 


by Mark Pilgrim worth checking 
out: http://diveintohtml5.info. 

subject Online Easy 
Listings 

From Adrian 


Adrian would welcome any 
constructive feedback. 

Subject 
From Matthew 


Where’s WD 
on Android? 


I have created a simple online 
system called Online Easy 
Listings. It creates a simple 
HTML/CSS/Java page for using 
on Facebook with iFrame; it can 
be found at http://on.fb.me/ 
Abk2th. It has default list headers, 
but these can be modified to 
create music, movies, photo or 
audiobook-focused lists. It’s easy 
to use, 100 per cent online and, 
best of all, free! I would like you to 
review it and, if you like it, perhaps 
you could spread the word? 
Thanks, guys. 

Facebook users should take a 
look at the link and let us know 
what you think. We’re sure that 


After reading many issues of your 
magazine I’ve seen great demand 
for an Android version of WD, but 
no response as to when, or even 
if, this will happen. After browsing 
the web I came across a site 
specialising in digital mags that 
are compatible across many 
platforms (including Android and 
iOS). I’m wondering why Web 
Designer isn’t available. To my 
surprise, the Italian edition is 
available but not the English one! 

An Android version of Web 
Designer has been mentioned 
before and, while not currently 
in production, it will happen in 
the near-future. Promise! 



APPS MAGAZINE 

Apps Magazine is our sister title dedicated to finding and 
reviewing the best - and the worst - iPhone, iPad and Android 
apps out there. Each issue the magazine brings the latest and 
greatest App Store and Android Market products with expert 
buying advice for a broad range of readers. Find out what’s in 
the latest edition by visiting www.knowyourapps.com. 


Comments from the Blog 

• Web Designer is always keen to 

hear from its readers, followers and 
visitors. Here we bring together a 
varied selection from the last month 

Don said: 

(re ‘5 top WordPress techniques’) 

A punch list of must-dos first out of the box. It’s good to have 
a development routine. 

Mike said: 

(re ‘Going 3D with WebGL’) 

Thanks a lot for this - it looks awesome. I made a 3D game 
in Macromedia Director 8 a long time ago, but now I’m into 
JavaScript programming. Never managed to write a 3D 
Tenderer in JS myself, but now that browsers are starting to 
support this kind of stuff I don’t even need to. 

Mark Simchock said: 

(re ‘Build responsive sites using the 320 and up framework’) 
This overview was helpful in terms of a tool for implementation 
- thanks. However, it would be good to see more discussion of 
the step prior and that decision-making process. For example, 
it said: ‘Let’s say that we don’t want to show the 
complementary column’s content if the screen width is smaller 
than 480 pixels.’ That’s a great idea, but then what? Just leave 
the extra column out? Don’t get me wrong, I understand 
context (read: device) impacts experience. Nonetheless, if 
content is going to hit the editing room floor at 480 and below, 
perhaps it’s not worthy of 480 and above either? Would it 
really be a sin to do a [whole] site in 480? At least then the UX 
would be 100 per cent consistent. In a multi-device world, is it 
really fair to expect someone to relearn a site over and over? 



Search & buy 

Amazing Domains 

@Better prices 


.mobi 


.eu 


•com 

.info 






















Ashraf is the director of product 
management at Brightcove, a global 
provider of cloud content services. 
Previous employers include 
Nokia and Motorola, where 
he worked on digital video 
solutions, security 
features and 
webapps. 


Ashraf Al-Karmi 


Can HTML5 video iron out the kinks and dominate on mobile? 


F or developers, brands and broadcasters alike, getting 
video content to the largest possible audience is no longer 
a question of merely publishing on a website. Today’s 
challenge is ensuring you can provide consistent video experiences 
across an increasingly complex range of Flash and HTML5 devices. 

HTML5 video is vital for reaching the ever-expanding segment of 
today’s mobile audience using iOS and Android-connected devices. 
When the iPad burst on to the scene in 2010, media publishers 
scrambled to figure out how to make their video available on the hot 
new consumer device. The cross-platform, cross-device nature of 
HTML5 continues to provide a strong case for working with HTML5, 
and developers are turning to it to reach users across a multitude of 
connected devices in the simplest way. 

What’s more, with recent news that Adobe is putting its future 
mobile video efforts behind HTML5 and ceasing development on 
mobile browser Flash, PITML5 is proving more than ever to be the 
future of online video. HTML5’s promise lies in the idea that video is 
now thought of as a central asset for web content and is expressed 
as such in hypertext markup language. We’ve known for a long time 
that video is important, but it was never integrated into the fabric of 
the web in an intentional way until this update. 

Its aim is to ultimately improve the interoperability of web 
experiences and, by making the video tag syntax standard across all 
browsers, publishers are able to simplify and standardise playback 
for any device via the browser. In theory, PITML5 means great things 
for developers and content publishers alike. For one thing, it aims to 
cut down the fragmentation of device and operating system- 
specific apps by allowing mobile web scalability for all platforms and 
form factors. Beyond this, having open standards-based video 
playback eliminates the need for downloads and updates of 
proprietary plug-ins and removing the necessity for a plug-in on 
startup means faster video experiences. 

But for now it’s far from being a be-all-and-end-all solution. In 
terms of maturity and robustness of interactive features, FITML5 is in 
its infancy. The challenge today is that HTML5 video is really only 
focused on the core function of playback. Playback is undoubtedly 
the foundation of great video experiences, but publishers want 
more holistic video experiences - elements like branded players. 


playlists, advertising, analytics, audience profiling, calls to action and 
content protection. Right now, these more complex features have to 
be rebuilt from the ground up to work in the HTML5 environment. 

But even consistent video playback isn’t a guarantee with HTML5. 
New research we’ve conducted at Brightcove has shed light on 
inconsistencies across devices that could be harming the user 
experiences you’re providing, as well as jeopardising your video 
advertising and analytics initiatives. 

Our research discovered that consumers are accessing HTML5 
video through nearly 20 different versions of iOS and Android 
operating systems and this affects the reliability of video playback 
and creates differences in advertising and analytics behaviour. The 
HTML5 video tag is supported in all major browsers and is just 
another HTML element that can be styled with CSS2 and JavaScript. 
But the facts indicate that any video player utilising the HTML5 
video tag must account for major variances in playback behaviour. 

Tests run by Brightcove into specific differences in HTML5 have 
yielded some surprising results. It turns out that significant numbers 
of a potential audience may not be able to see video playback at all 
because of the fragmentation of operating systems across devices. 
What’s more they may see inexplicable delays and unexpected 
behaviour that distracts attention away from the content completely. 

Basic functionality such as play/pause fires at different times and 
for different reasons across each device platform including various 
versions of iOS and Android operating systems. In addition, 
properties such as time and buffering length fluctuate and, at 
completion, some browsers report the video was paused and 
ended, while others report not paused and not ended. 

Why does any of this matter? Video players using the HTM L video 
tag have to provide a stable environment for analytics, otherwise 
advertising opportunities are in danger of being sacrificed. But our 
findings highlight major variances across video experiences for end- 
users and it’s likely that few web developers and organisations are 
even aware these differences exist. 

Even fewer have the skills to develop effective workarounds for 
these inconsistencies and yet the complexity of publishing video 
across HTML5-compatible devices will continue to grow as the 
distribution of operating systems and browsers further fragments. 
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to work better online 
from Fast hosts 


That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, 
hosted email or online backup. It’s also 24/7 
support over the phone and online. 

Your work doesn’t stop at 5:30pm, so neither 
do we. That’s why you’ll get support on our 
technology from friendly experts 24/7. But the 
best thing about our 24/7 support is that you 
probably won’t need to use it. 

Find out how your business can work better online 

call frGG on 0800 6520 444 
or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 




hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


© 2012 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. 

Terms & Conditions apply, see website for details. 
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Accessibility 
in focus 


Ross is the iouncier end mene§in§ 0 % m > 
director of Recite Me Ltd. With ft 
first-hand experience of dyslexia, jfjL JK!*! 
and having grown frustrated with MyftjPnim 
a lack of progress in the internet fij MfitmiUm 
being made more accessible, 

he made it his business Ross 

to bring equality Linnett 

to the web. 


Accessible sites are not only ethical, but sensible business 


A s someone who grew up with dyslexia, but didn’t actually 
know it until I was at university, I’m very aware of the need 
to make sure that people with special needs are taken into 
consideration when offering products and services. In an age 

when all shops must offer disabled access and special measures are 
in place for almost every conceivable condition, it’s amazing how 
many companies and organisations continue to ignore the needs of 
a considerable number of online customers. 

Computer-based solutions to help people with visual impairment 
or dyslexia are nothing new and they certainly made a big difference 
to my own learning once my condition had been identified, but for 
the most part they have usually been designed for a single computer; 
this means they’re of no use if you’re away from your own PC or 
Mac. Government best practice guidelines for website design have 
also been in place for several years 
now, but the available solutions 
were often too expensive or 
complicated to implement. 

What many companies and 
organisations fail to realise is that, if 
you don’t have accessibility tools 
integrated into your website, you’re 
potentially missing out on more 
than ten per cent of the population. 

With approximately 6 million 
dyslexia sufferers and 2 million sight-impaired people in the United 
Kingdom alone, this is a substantial chunk of the market that 
eCommerce retailers - or indeed any other website designed for 
public consumption - simply can’t afford to ignore. 

Recite is the result of an idea that grew from my own frustration 
with the status guo. Although I came up with the concept a few 
years ago, developing technology and increasing demand - spurred 
on by raised awareness of the issue - convinced me that we could 
make it work. My vision was to come up with a product that was 
simple and intuitive for the end-user, but also easy to implement for 
the website owner. It offers web designers and site owners a ready¬ 
made solution that has been developed and tested by people with 
real-life experience of these conditions. 


The first Recite product, which was launched in early 2011, is a 
platform that can make new and existing websites accessible to 
dyslexic and visually impaired users. It features a wide range of tools 
including magnified plain text view, a colour-coding system, text-to- 
speech capability as well as a feature that can translate text into a 
variety of languages. The second phase, which will be coming out in 
2012, will be a more personal product to help individual users make 
the best use of both the websites they are visiting and the software 
applications from any computer. 

Recite is of course a business, but it’s also the fulfilment of a long¬ 
term personal ambition to help meet the reguirements of dyslexic 
and visually impaired users, while also educating businesses and 
organisations on the need to act. The current W3C AA guidelines on 
web accessibility are just that - guidelines - with no force in law, but 
the government has indicated this 
may change if things don’t improve 
during 2012, so all the more reason 
to get the message out there and 
provide a solution for those in need. 

W3C compliance used to be a 
pretty complicated thing to get right, 
with implications for the look and 
feel of a website, but Recite means 
that accessibility can be seamlessly 
integrated into new or existing sites 
by inserting just a single line of code. The language capability also 
helps to open up websites to new audiences across international 
borders. If you don’t act to make your site more accessible, you’re 
potentially missing out on a large number of visitors and would-be 
customers who could be bringing revenue to your company in 
these tough economic times. 

Whichever solution is chosen, the most important thing is that 
companies and organisations act on this issue as soon as possible. 
Legislation can be a good thing, but it does bring its own problems 
and, as a result, is rightly being kept in reserve as a last resort. The 
way I see it, if you comply before it becomes law, everyone wins. 

To find out more about Recite, and to perhaps give the service a 
try for yourself, pay a visit to http://reciteme.com. 


if If you don’t have 
accessibility tools integrated, 
you’re potentially missing out 
on more than ten per cent 
of the population if 
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Did you know 
you can put your 
ad on Google? 


These guys can help you do it 

See those little men holding the sign? Hard at work for Google, 
making sure your ad is in front of people searching for your product. 
Thousands of businesses of all shapes and sizes win new business 
every day with the simple-to-use service called Google AdWords. 

How does it work? 

Choose a few search terms related to your business, plus your daily 
budget and the amount you're willing to pay when someone clicks 
your ad. When customers search one of your terms, your ads may 
appear next to the search results. 

Save money 

• Try it today - with £50.00* Google AdWords advertising 
for business users**. No minimum term or commitment. 

• Unlike directories or classifieds, you don't pay to be listed 

- you only pay when a potential customer clicks on your ad. 

So, if you choose to pay 25p per click, this voucher covers you 
for 200 new visitors to your site! 
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It works fast - your ads can be up and running within minutes. 
Target them to any town, region, country, or even the whole world. 


Voucher missing? 

Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 

£50.00* advertising credit 

with Google AdWords for your business. 

No minimum term or commitment. 

Offer only available to businesses in the UK. 




Put these little guys to work 
for your business today! 

Visit google.co.uk/ads/start and 
follow the step-by-step instructions. 


Or call 0800169 0478*** 
to get your ads built by Google 
specialists, and ongoing follow 
up support. 



*Expiry dates apply - please see voucher for details. 

**Terms and conditions apply. Promotional credit can only be used for AdWords accounts that are less than 14 days old by advertisers with a billing address 
in the UK. Advertisers will be charged for advertising that exceeds the promotional credit. Advertisers will need to suspend their ads if they do not wish to receive 
additional charges beyond the free credit amount. Offer subject to ad approval, valid registration and acceptance of the Google AdWords Programme standard 
terms and conditions. The promotional credit is non-transferable and may not be sold or bartered. In some cases, advertisers who choose prepay billing may 
be subject to a £10 minimum prepayment before their account is activated. Any such prepay amount will be credited to Advertiser's account once account 
is activated. One promotional credit per customer. For full terms and conditions please visit http://www.google.co.uk/adwords-voucherterms. Google Ireland 
Limited, a company incorporated under the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow 
Street, Dublin 4, Ireland. Copyright 2012. Google and Google AdWords are trademarks of Google Inc. and are registered in the US and other countries. 

***Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone or call from abroad. 
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Furnish your studio with the latest gear, gadgets and gizmos 


Tefal Toast n Egg 

£30 

www.tefal.co.uk 

It’s time for a hot sandwich 
and you need it now. This 
combination wide-slot toaster, with 
egg cooker and meat warmer, can 
toast, cook and provide a tasty 
snack in five minutes flat. 

Every office should have one. 


Uncle Tom’s 
Zombie Chow 

£ 5.50 

www.nimbacreations.com 

Friendly with any zombies? Give 
them a tin of Uncle Tom’s Zombie 
Chow to quell their appetite. What’s in 
the tin? We don’t know - we’re too 
scared to open it. Get an accompanying 
Zombie Donor Card for an extra quid. 


Pro HTML5 and CSS3 
Design Patterns 

£ 35/545 

www.apress.com 

Discover how to style webpages 
using CSS3 and HTML5. This tome 
contains 350 ready-to-use patterns 
(CSS3 and HTML5 code snippets), which 
can be dropped straight into a design. 


DoxieGo 

$199 

www.qetdoxie.com 

The neat and portable Doxie 
Go means that you can now scan 
documents wherever you are. Simply 
charge it up, turn it on and get scanning. 
The device can sync with a desktop, 
iPhone, iPad or the cloud. 







PicSayPro 

£2.49/54.27 

http://bit.lv/ 

xUvFoq 


Need a top-notch 
photo editor for 
Android? Look no 
further than PicSay 
Pro. The app allows 
users to sharpen, 
remove red eye, 
crop and straighten, 
distort, insert cutouts, 
paint, as well as add 
text and word 
balloons. Also apply 
effects such as cross 
processing, lomo, 
vignette, faux-HDR, 
tilt shift and sketch. 


HTML5 and CSS3 
Design Patterns 


PowerlineAV 
Adapter Kit 

£ 61/587 

www.trendnet.com 

Q If you want a 

network in minutes 
then a set of ‘homeplugs’ 
is the answer. These two 
compact plugs work 
together to create a 
high-speed network for 
up to five connections. 


Sky Wizard 

£ 35/575 

www.silverlit.com 

Q A toy helicopter that is controlled 
by a smartphone sounds like a 
must-have to us. The Sky Wizard offers 
multi-directional flying and a ‘gyro 
directional stabiliser’ for easy control. 
Compatible with iPhone 3 and 4, iPod 
touch, iPad 1 and 2, plus Android devices. 


Kangol C.VOX jacket 

£60 


PlayStation Vita 


Q Headwear specialist Kangol has brought 
out a range of jackets with its integrated 
C.VOX speaker technology. The incorporated 
headphone system allows you to seamlessly 
listen to your music on the move, complete with 
concealed zips inside the neck so you can tidy 
your headphones away when not in use. 


Q Just in case you didn’t know, the 
Vita is the next generation of 
PlayStation handheld. The device 
comes with a five-inch screen, 512MB of 
RAM, 128MB of VRAM, rear touchpad 
plus front and rear cameras. 
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b Analytic 

Free 


bit.lv/A1mrHJ 


A simple app that fetches a 
selection of your latest Google 
Analytics. On offer are three 
screens: the Dashboard, which 
provides a summary of stats; 
Visitors, to see where people are 
coming from; and Traffic Sources 
to see how users get to your site. 


1333^**** 
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This book is a great resource 
for those looking to make the 
switch from Flash to HTML5 


Total 911 

£4.50 

www.total911.com 

© If you are going to get a sports 
car it might as well be a Porsche. 
Check out our sister mag, Total 911, for 
great features, guides, tests and 
reviews. Even for those of us who can’t 
afford one yet, we can always pick out 
the model we’ll be driving one day... 


Motorola Razr 

£500 (SIM free) 

www.motorola.com 

Q This is a smartphone which is 
packed with both style and 
substance. Powered by a dual-core 
1.2GHz processor and Android 2.3, 
the Razr sports a super-thin, 
streamlined design, an 8MP 
camera and Flash support. 


Foundation HTML5 
Animation with JavaScript 

£31/$40 

www.apress.com 

Q This book is a great resource for those looking to 
make the switch from Flash to HTML5; it’s going to 
happen eventually. Discover how to create animations, 
games and apps for browsers and mobile devices. 


Meta 150mm ruler 

£8 

http://metastationerv.com 

Q Good design starts at the planning stage and for those 
who still like to get hands on with pen and paper this 
150mm pixel ruler makes for a great companion. On offer are 
four sizes: 150px, 300px, 600px and 1,200px. 


Save costs by outsourcing your admin to these great online services 



Campaign Monitor 

From 

www.campaianmonitor.com 

Use this service to create, design, manage, monitor, 
rebrand and resell email templates to your customers. 



A 

2CX 



Standout Stickers 

From FREE 

http://standoutstickers.com 

Get high-quality customised stickers to help promote 
anything that you’d like to shout about. 
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1&1 WEB HOSTING 



m DUAL HOSTING 


"No matter how much 
your business grows, with 1&1 
you're always in safe hands. 
Today and in the future!" 


Ut STARTER 


1S1 BUSENES5 


Continue 


Premium Hosting for Professional 
Websites: 


Maximum Availability: 
Geo-redundant data centres - 
hosted securely in two locations 

Super Fast: 

275 GBit/s connectivity 

Environmentally Responsible: 
Powered by green energy 

Future-proof: 

1,000 internal developers 


m WEB HOSTING 

Your website is simultaneously hosted 
in two secure, high-tech data centres. 


6 MONTHS 

FREE! 


6 MONTHS 

FREE! 


6 MONTHS 

FREE! 


6 MONTH5 

FREE! 


Stefan Mink, 

1&1 Data Centre Manager 
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1&1 DOMAINS 

■ Full DNS Management 

■ Domain Transfer 

■ Masked URL Forwarding 

■ Complete Domain 
Contact Management 

■ Unlimited E-mail Forwarding 


.co.uk, .eu & more 





1&1 UNLIMITED -fi MONTHS 

■ Unlimited Web Space and Traffic 

■ Includes a FREE .uk Domain 

■ 5,000 P0P3/IMAP E-mail Accounts 

■ Unlimited FREE 1&1 Click & Build 
Applications 

■ PHP, Zend Framework, Perl, Python, then at £6.99/month* 

Ruby, SSI 

■ 100 MySQL5 Databases (1 GB each) 

■ Up to £30 Facebook® and Bing™ Vouchers 

■ Double Security via Geo-Redundancy 










































SPECIAL OFFERS END 29/02/12! 



1&1 BUSINESS E-SHOP 6 MONTHS 


I Sell up to 1,000 Items 
I Group Items in up to 100 
Categories 

I Customisable Designs 
I Advanced Marketing Tools 
I Order & Stock Management 
I PayPal Compatible 
I eBay Integration 
I Product Search Features 
I 24/7 Phone & E-mail Support 


START 

vniiR 



then at £11.99/month 


Domains 
Web Hosting 
E-Shops 
Servers 
Websites 

V' Search Engine Marketing 
E-Mail Packages 


AWARDS 2011 



Call 0844 335 1211 or buy online 


www.1and1.co.uk 


*A 12 month minimum contract term applies. Standard prices apply after the initial offer term. Visit www.1and1.co.uk for full promotional offer details, terms and conditions. Prices exclude VAT. 
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Gallery of stunning web design 




Nerisson 


www.nerisson.fr 

nevelopmeiit technologies Word Press, HTML5, CSS, JavaScript, jQuery, AJAX, Deeplinking 



Designer Jimmy Raheriarisoa (in-house) 

www.nerisson.fr 

This pared-back portfolio oozes style and is 
the perfect portal into the artist's psyche 


here is no doubting that 
this website is uber-cool. 
From the moment you 
arrive, the design and 
elements shout sleek 
and minimalist, although 
discovering what the site 
is about takes a little 
investigation. Piecing 
together the gorgeously 
designed CV and a few 
facts about past experiences, you learn 
that Nerisson is the portfolio of Jimmy 
Raheriarisoa, showing off his design 
skills in both official and unofficial work. 


The site is pretty straightforward and 
easy to navigate, with a host of clear 
call-to-actions that you can’t help but 
click on. Every aspect of the design has 
been put in place to help the visitor see 
as much of Jimmy’s work as possible. 

After viewing some of his projects it 
is obvious this guy has talent, but while 
it looks great, it would be beneficial to 
have a bit more information about the 
illustration/toy/iconography, giving us a 
little more background on the piece 
and whether it was paid work etc. This 
portfolio site is a great package to show 
off some great design - check it out! 




<2\bove> 

• In case you don’t want to scroll through there 
is also a simple navigation menu provided 


if From the moment you arrive, the 
design shouts sleek and minimalist •• 
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Got it? Flaunt it! Tell us about your site ©webdesigner@imagine-publishing.co.uk 



o 

All 





Personal 
touches 

Most portfolio sites show off the designer's 
work and this one is no exception, but it is 
Raheriarisoa's personal touches, such as the 
monsters or his doodling on his CV, that give 
the website a little something extra. 



JIMMY 
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% Mollm 
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<Lef t, clockwise, from far lef I > 

• The one-page scrollable CV really brings his 
work to life thanks to its original styling 

• One example from Jimmy’s portfolio 

• The limited colour palette keeps things ultra-chic 

• Even the loading page shows off his creativity, 
although it appears after every click 


lightbox 


23 


































Know a site that deserves to grace these pages? Tweet us now 0 @webdesignermag 


Slavery Footprint 

http://slaveryfootprint.org 

Dcweloimumt technologies HTML5, jQuery, CSS 



Designer MTZHF 

http://mtzhf.com 

A site that really opens your eyes to how 
your lifestyle impacts the rest of the planet 


he idea of discovering 
how many slaves work 
for you is how this site 
pulls you in, but what 
makes you stay is the 
amazing animation, 
fascinating facts and 
the interactive survey. 

There are two parts to 
this site: the initial ‘What? 
Slaves work for me?’ 
entry page and the 
survey. Both follow the same distinct 
tone and design but can’t be confused. 
The initial page is a vibrant and 
colourful history lesson on the slave 
trade and gives you a better 
understanding of why to take the 
survey. The scrolling method has been 


designed so it looks as though hands 
are placing the paragraphs as you read 
- it is a nice touch but be warned, once 
you complete the survey, any time you 
try and go back to this homescreen 
you’ll be redirected to the results - 
annoying if you need screengrabs! 

The survey itself is pretty simple. The 
guestions are straightforward and the 
design and occasional animation are 
drawn lovingly. To get a clearer 
understanding of your life the website 
at times asks you to be specific about 
your buying behaviours and it seems a 
shame they often use sliders on these 
occasions as it’s a reminder you are 
doing a general survey. All in all a simple 
but enlightening site that anyone can 
use to see their impact on the world. 


!# The questions are straightforward 
and the design is drawn lovingly if 




1 


SUPER 
SURVEY 

The survey is why people visit the site; 
whether you want a high or low count 
you leave with an education and it's a 
great form of user interaction. 
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<2\bove, lop to bottoiu> 

• The lovingly drawn imagery can be found 
everywhere when you explore the site 

• Helping hands guide you through a lesson in 
modern slavery and how it affects all of us 

• The facts that are posted around the site give the 
design a serious yet relatable touch 

• Now and then some of the specifics let down the 
look and feel of the website 
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<2\bove> 

• Who knew that buying everyday products 
and owning a few too many electrical goods 
could result in 49 slaves? 


<Lef t, from 
left to right > 

• Seamless drag-and-drop functionality is used 
to bring the designs to life 

• The not-for-profit organisation has recently 
allowed for more specific geolocation searches 
to give visitors a more accurate score 
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Know a site that deserves to grace these pages? Tweet us now Q| @webdesignermag 


Synthview 

http://typography.synthview.com 

DovclopnuMittechnologies PHR XHTML, CSS, jQuery 



SYNTHVIEW.COM 

graphic & type design 


Designer Jan Tonellato 

www.synthview.com 

The development of a new font has never 
been captured in such an innovative way 


he age-old question of 
which font to use never 
goes away. Even when 
one is finally chosen it 
isn’t always the most 
effective for all situations. 
A sentence that looked 
great on a testing site, for 
instance, can suddenly 
transform into a kerning 
nightmare in your own 
header etc. Luckily, Jan 
Tonellato has overcome this concern 
by providing the comprehensive 
design and development of the original 
font Novecento on this website. 

This typeface is specifically designed 
to be used for headlines, visual identities 
or short sentences. Lighter faces 
provide a more contemporary look and 
feel, while the bolder ones definitely 
have more retro overtones. 


http://typography.synthview.com 

may look like a simple site promoting a 
new font, but Jan has developed it from 
scratch and has even vetoed ready¬ 
made jQuery plug-ins. The result is a 
stylish mini-site that has four distinct 
sections: a font overview, glyph table, 
try-and-buy area and feedback. Each 
section is seamless thanks to the use of 
colour and, of course, the typeface. 

With just a three-tone palette, the 
colours are vibrant enough to grab 
attention without causing a headache 
and the mix of Myriad Pro alongside 
Novecento makes the latter stand out. 
The only area that may play with the 
eyes is the try-and-buy section; 
designed to follow your cursor, it gets 
disjointed and hard to read, especially 
with the black on a pink background. 

Overall though the site offers an in- 
depth overview of a versatile new font. 


## Each section is seamless thanks to the 
use of colour and, of course, the typeface ## 


□ 


SYNTHVIEW.COM 

graphic & type design 


FONT OVE 


TH S IS 


NOV 


N 


STYL: 


Utirabold Bold 


Wide 


A A 


Regular 


A A 


Narrow 


A A 


Condensed 


A A 
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< Above, top to bottoin> 

• Understanding how a font was inspired and 
developed gives it much more substance 

• The try-and-buy section has movable shadows 
that follow the cursor and mess with your eyes! 

• This well-known brief sentence illustrates every 
character of the font in its standard state 


<Left> 

• The homepage opens on to the new font in varying 
weights, making sure no visitor can miss it 
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Everything you need 
to work better online 
from Fast hosts 

That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, 
hosted email or online backup. It’s technology 
based in the UK. 

You don’t want to keep your customers waiting. 
And by choosing technology that’s based in the 
UK, your customers in the UK will find websites 
load faster. Plus, with 24/7 support via the phone 
and online we’re here whenever you need us. 

There are many reasons why a UK data centre is a 
good idea, but, surely, that’s the most important. 

Find out how your business can work better online 
call free on 0800 6520 444 
or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 


hosting | domains | dedicated and virtual 



TM 


W*fH * 



DATA CW1RZS 


nsJL£ 

•7\tS 


servers | reseller hosting | online backup 


© 2012 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. 

Terms & Conditions apply, see website for details. 






Kicking up a stint 

Web Designer makes the short haul to London to talk with the 
creative geniuses at Stinkdigital. Hear how they struggled to get 
started, why they’re very much pro open standards and about the 
project that captured the attention of Kanye West and 50 Cent 

who Stinkdigital wliat Interactive innovators creating engaging interactive experiences 
where 155-157 Farringdon Road, London, EC1R 3AD web http://stinkdigital.com 


!!!!!!!!!! tinkdigital is an interactive creative 

;;;;;;;;;; company consisting of developers, 

*••••• animators, designers, digital 
iiisSSS** producers, plus film producers and 

IISISSISSS directors who work closely together 

to build innovative and engaging 
• !!!!!! interactive experiences for 
:::::::::: advertising agencies and brands. 

Since opening just three years ago, 
they have won a Cannes Grand Prix, a 
Webby Award and an FWA People’s Choice Site of the 
Year award. Their work has also been continually 
recognised by the Cannes Lions, The One Show, 
Eurobest, the FWA and others. 

Employees primarily come from digital agencies, 
production houses and design outfits. Stinkdigital 
opened in London in 2009 and expanded to New 


York in 2010. The combined full-time workforces of 
both offices is now 40, however their pipeline can 
increase to as many as 80 full-time staffers and 
trusted freelancers depending on the project at hand. 

Their core competencies begin with interactive 
creative, concepting and design and continue through 
to high-end execution and build. Because Stinkdigital 
is the offshoot of one of the world’s biggest advertising 
film production companies - Stink - they often get 
asked to produce large, film-led interactive campaigns. 
That said, as a company, they make all types of online 
experience, including large-scale FITML5 builds, 
interactive installation pieces and Arduino-powered 
electronics - the fun for them really is in the variety 
and the opportunity to innovate or wow. 

Stinkdigital is a relative newcomer to the industry. 
Founder and MD Mark Pytlik gives an insight into how 
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Ultimat Vodka: Social Life Audit 
Philips: Obsessed With Sound 
ASOS: Urban Tour AW11 


Wrangler: Mark Your Territory 
Diesel: Diesel Island Constitution 
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if I think 2011 has been our strongest year, 
creatively. I think weve done a lot of things 
that have given us different dimensions ill 


the agency has progressed since its uncertain early 
days. “We’ve evolved pretty quickly over the years, 
growing from a team of six that started in one tiny 
London office to a team of about 40 across larger 
offices in London and New York. It wasn’t an easy 
beginning, though. We launched our company in the 
middle of a recession in January 2009 and didn’t see 
a single brief for the first six weeks. That was a scary 
period, and there was a lot of doubt that perhaps we’d 
misjudged the market. But then a brief from Tribal 
DDB Amsterdam came through the door for a project 
for Philips. It was an interactive film for Philips’ 21:9 TV 
range. We pitched an idea with one of our directors, 
Adam Berg, and the subseguent piece (which was 
called Carousel) kind of blew up the internet. Within 
the first three weeks of it going live, we got all kinds of 
crazy attention, including mentions from Kanye West 


and Ashton Kutcher. Weirdly enough, 50 Cent went 
on to make a music video inspired by it. And we got 
constant emails from agents in Hollywood looking to 
get in touch with Adam. The piece would become the 
first-ever interactive film to win the Grand Prix in the 
Film category at Cannes. Although it still took some 
time from that point onwards, that project 
undoubtedly put us on the map. 

“I’d like to think that a lot of the other major 
milestones have come more recently. I think 2011 has 


been our strongest year, creatively. I think we’ve done 
a lot of things that have all given us slightly different 
dimensions. If I had to choose one project, it would 
probably be Urban Tour (for ASOS), another 
interactive film which is easily one of the most 
ambitious and complicated things we’ve ever done.” 

Pytlik goes on to explain how the agency name 
was easy to choose and how it has evolved from its 
original incarnation. “We’re the digital offshoot of a 
larger film production company called Stink, so. 
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Stinkdigital timeline 


Established 2009 


Founder Mark Pytlik 



March 2009 

Release first major 
project, Carousel for 
Philips directed by 
Adam Berg. 



009 


January 2009 

Stinkdigital London 
opens in a small 
office in Hackney 
with an office of six. 



June 2009 

Carousel wins 
the Film Grand 
Prix at Cannes. 



December 2009 

Stinkdigital named 
production company 
of the year by Boards 
magazine. 


May 2010 

Stinkdigital New York 
launches with small staff of 
five, fronted by executive 
producer Stefan Dufgran. 



'boards 


ill It’s a very competitive landscape at the 
moment and each project is usually only 
awarded after a pitch or bid process 


frankly, it didn’t take very long to arrive at the name 
Stinkdigital. All that said, when we started, we referred 
to ourselves as ‘Stink Digital’ (two words), and we’ve 
only recently taken the step of condensing that into 
one. There are a few reasons why we’ve made that 
change, but maybe one of the most interesting is 
because ‘stinkdigital’ is our handle in various places 
on the internet (whether Twitter, Facebook, Vimeo, 
etc) and it felt appropriate and kind of progressive to 
reflect that in our company name.” 

Of course, an agency’s online presence is its 
window to the world and needs to make the right 


impression. Pytlik affirms its significance, but rues the 
lack of time they can dedicate to their own due to 
external projects. “I think any agency’s site is extremely 
important, which is why we’re mildly embarrassed 
that our own site has been a holding page for so long! 
(What’s that old saying about the cobbler’s kids always 
being barefoot?) There isn’t really any reason for it 
other than the fact that 2011 was so busy we simply 
didn’t get a chance to take a clear run at a new site. 
That said, it’s well underway now, and we’re pretty 
pleased about how it’s coming along. In fact, we’re 
hoping it’ll be live by the time you read this.” 


Stinkdigital and big brands are good friends. James 
Britton, executive producer (London), tells us how the 
agency’s level of craftsmanship and reputation has 
helped bring in new clients and projects. “We’ve guite 
guickly built a global reputation for the work that we 
do, and the level of craftsmanship that we bring to our 
projects. For the most part, when an agency or new 
client gets in touch, it’s because they’ve seen one of 
our recent pieces of work, and that the work perhaps 
has similarities with a concept that they’re hoping to 
bring to life. It’s a very competitive landscape at the 
moment though, and each project is usually only 
awarded after a pitch or bid process against one or 
two other companies. 

“We’re also fortunate enough to represent a roster 
of world-class film directors and will often be 
approached with a view to an agency or client 
wanting to work with them. Many of our directors are 
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Stinkdigital 




December 2010 

Lexus: Dark Ride wins F WA 
People’s Choice Award. 
London now has around 
12 full-time staff. 


December 2010 

Stink/Stinkdigital named 
in top five production 
companies in the world by 
Crea tivi ty Magazin e. 



CREAT 
IVI TY 


September 2011 

Stinkdigital New York launches Ultimat: 
Social Life Audit with Amalgamated 
Advertising. Adage names it one of the top 
ten social-media campaigns of the year. 

October 2011 

ASOS: Urban Tour (directed 
by Sebastian Strasser) 
launches in London. 

Millions see it in first week. 



December 2011 

Stinkdigital finishes second 
in Campaign Magazine's 
production company of 
the year accolades. 


January 20. 

Stinkdigital launches Stinkdigital 
Arts, a new offshoot dedicated to 
working with a small roster of 
digital artists and specialists. 



embracing the potential of interactive experiences 
and we continue to challenge each other to find new 
ways to bring ideas to life.” 

With such an impressive pedigree and portfolio 
Stinkdigital can afford to pick and choose the projects 
that most excite them. Britton explains the process of 
selecting new jobs. “There are very few projects that 
would be classified as unsuitable, although admittedly 
we don’t typically get involved in straight-up 
production of things like banners and emails. The real 
benchmark is creativity. We’ve always tried to be 
selective about the brands and agencies we’ve 
worked with, and there are a few guestions we always 
ask ourselves when a new project arrives: is there a 
good idea at the heart of it? Is there a problem for us 
to solve? Is there a legitimate opportunity for us to 
innovate and do something that we’ve never done 
before? If the answer to all those guestions is yes, then 


size isn’t really too important to us; the most important 
thing is that it gets the team here excited.” 

With a project signed and sealed it’s time to deliver. 
Britton reveals the system used at the agency. “We 
maintain a relatively flat structure at Stinkdigital, and 
there are a few key people who will have a hand in all 
of our work. We’ll often get involved in projects at a 
very early stage, and will play a significant role in 
developing ideas and concepts with the client. At that 
point, everyone will share ideas and then, when we 
arrive at a solution, well build a team to best service 
that specific project, drawing on the specialisms we 
have in the studio. Our approach is always to lead with 
the idea and then propose a technical solution that 
best serves the experience we’re trying to deliver. 
Typical project teams include a combination of 
creatives, designers, interactive developers, motion 
designers, producers and creative technologists”. 
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Ian McGregor, 

lead developer. 

Stinkdigital 


«« So-called ‘back-end’ 
technologies such as PHP, 
Java, .NET and MySQL are 
often the unsung heroes 
in our projects ” 
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•• ...many different technologies working in 
harmony - that, for us, is what it’s all about §§ 


Flash plays a big part in many of the agency’s 
projects. Lead developer, Ian McGregor, explains 
some of the plus-points of working with the platform 
that can cause some division in the development 
field. “For us, the strength of Flash lies in its capabilities 
for interactive video, gamified experiences, 3D and 
cross-browser support. Flash seems to encompass a 
powerful concoction of the creative and technical 
sides of programming, with many ActionScript 
developers possessing a high level of skill in both 
creative areas such as particle effects, 3D and game 
design, and more underlying technical skills such as 
implementing design patterns and refactoring. 

“Additionally, there is also a good pool of excellent 
programmers who are able to code complicated and 
robust applications in ActionScript.” 

Flash is just one tool that Stinkdigital uses to get 
ahead. McGregor reveals the other key technologies 
that make the grade. “Film and motion design are 
obviously key for us. Having such a strong film 
production capability in-house enables us to shoot 


with interactive in mind, using tools such as Phantom 
cameras. Motion Control and/or bespoke camera 
bodies with specific lenses to achieve what we want 
to interactively. In postproduction we often use 
technigues such as motion tracking to do some very 
powerful things with interactive film. 

“So-called ‘back-end’ technologies such as PHP, 
Java, .NET and MySQL are often the unsung heroes in 
our projects. Whether used to manipulate data, 
access third-party APIs or process audio and video on 
the fly, these are very powerful tools that we couldn’t 
do half our projects without. 

“For some projects, JavaScript/HTML/CSS is the 
perfect fit, and as the capabilities of these languages 
expand then so does the scope for their use in 
creative applications. We’ve been using these 


technologies from day one, and now we’re getting to 
the point where we’re producing work with them that 
can stand shoulder to shoulder with our Flash work. 

“We also use activeCollab for its project 
management functions, and our company is a Google 
Apps company, so everyone in the studio uses Google 
Documents for collaborative working. We also still use 
plenty of pen and paper! Overall it’s important to note 
that most of the work that we produce involves many 
different technologies working in harmony - that, for 
us, is what it’s all about.” 

Once a project reaches completion the next stage 
is to pass over to the client. Britton steps in to explain 
the after-care process. “The support we provide once 
a project has launched differs from client to client. 
Many of the projects we work on are developed in 
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support of advertising campaigns and often need to 
be maintained with updates to content. We usually 
aim to produce admin tools and documentation for 
our clients that enable them to manage things 
themselves, but in some cases well continue to be 
involved in projects for several weeks, or even 
months, after an experience has been launched. We 
also face the ongoing challenge of ensuring the 
projects we deliver continue to work on third-party 
platforms. For instance, Facebook, among others, 
keeps us on our toes with ever-changing updates.” 

HTML5, CSS3 and jQuery have been touted as 
technologies to supersede the Flash platform. 
Developer Magnus Dahlstrand reveals that Stinkdigital 
is an advocate of open standards and how they are 
slowly being introduced into their projects. “We’re 
developing more and more projects using FITML, CSS 
and JavaScript; one example is Diesel Island FW11 
(www.diesel.com/island), which, while still relying on 
lots of video content, is built using technigues from 
the emerging web standards of FITML5. 


“There’s a lot of promise in these technologies and 
we’re pro open standards, so well use FITML5 for 
projects where it’s a viable solution. Unfortunately the 
platform support is not yet as mature as it is for Flash, 
but with Internet Explorer joining the standards 
parade and silent auto updating becoming a de facto 
standard, the compatibility problems presented by 
old browsers should reduce in the coming years. 

“We’re also using jQuery, but while it’s great for 
DOM handling and dynamic content, the higher- 
profile FITML5 websites still make use of Canvas and 
WebGL and couldn’t have been made with jQuery 
alone. So knowledge of both JavaScript and helper- 
libraries such as jQuery is essential for our team.” 

Dahlstrand goes on to explain the considerations 
involved in designing and developing for mobile 
platforms. “It all comes down to the project and its 
brief, but we’re using progressive enhancement and 
graceful degradation methods as much as possible. 
The mobile-first approach is interesting, but with 
more and more mobiles getting bigger screens and 



KEY PROJECT 

Ultimat Vodka: 

Social Life Audit 

The Social Life Audit uses Face.com’s facial- 
recognition API to analyse an individual’s 
Facebook photos and Facebook Places check-ins. 
The program then scores these social life assets, 
giving a pass/fail grade depending on the score. 
Personalised infographics further illustrate the 
scoring system, using categories such as Gender 
Ratio, Average Mood and Social Status. To see it in 
action, go to www.sociallifeaudit.com. 
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if We usually know pretty early on if 
something is going to have mass appeal §§ 


better browsers, experiencing a site on mobile 
won’t differ as much from the desktop as it used to 
going forward. To make sure there’s always a 
fallback for older devices a ‘content first’ approach 
might be the way to go - having the experience 
being based on the content and not necessarily a 
mobile version of the platform. 

“Having one site that adapts to its environment 
is definitely viable, but it’s important to keep in 
mind that the mobile and desktop platforms will 
usually need to be treated differently, especially 
from a UX point-of-view. The interactions we’re 
used to and love on the mobile platform don’t 
work as well on the desktop, and the same applies 
the other way round; touch usage is one major 
consideration on portable devices, for example.” 

A completed project needs to be seen; founder 
Mark Pytlik returns to reveal how a combination of 
SEO and analytics are just two of the key factors 
that help promote their sites across the web. 


“The type of work we do tends to be larger 
campaign ignition point work, so while SEO is 
certainly a factor, a lot of any given project’s 
success tends to rely more on how it fits into the 
overall campaign - whether there’s been any 
external media spend or PR, whether it’s accessible, 
and - of course - whether it’s actually any good! 

“We usually know pretty early on if something is 
going to have mass appeal; our own suspicions 
about the success of various projects tend to be 
confirmed within the first day of it going live. When 
a project or an idea is really good, the best thing 
you can do is to make sure you’ve covered the 
basics in terms of SEO, accessibility, etc, and then 
just to let it do its thing out in the world. 

“Of course, we also often look to information 
gleaned from analytics to confirm or deny different 
creative approaches or UX ideas on various 
projects, and we always use what we’ve learnt to 
inform our future work.” 
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<What is the Canvas tag?> 

Canvas is very different to the other elements which 
were introduced with HTML5 in that its purpose is to 
manipulate 2D bitmap graphics or create them from 
scratch. In comparison, other new elements - such 
as Video and Audio - are simply used to embed 
existing media into a website rather than creating 
something new. The Canvas element is also 
interesting because it is effectively useless without 
the accompanying Canvas JavaScript API. 


AS A PIVOTAL ELEMENT WITHIN MODERN WEB DESIGN, 
ROB HAWKES OFFERS A SPECIAL OVERVIEW OF WHAT THE 
CANVAS TAG REALLY IS, HOW IT WORKS AND THE WAYS IN 
WHICH IT IS ALREADY PUSHING CREATIVE BOUNDARIES 


A good way to look at the Canvas element is by 
comparing it to an Etch-a-Sketch mixed in with a bit of 
Microsoft Paint. The reason for this is that Canvas is a 
tool that acts as a simple 2D drawing environment 
with features much like the Etch-a-Sketch/Paint 
hybrid: with lines, shapes, curves, basic colour filling 
and stroking (outlining) of lines and shapes, among 
many others. Canvas is like an Etch-a-Sketch 
specifically because the only way to completely 
change what has been drawn on it is to wipe it clean 
and start again, just like shaking the much-loved 
drawing toy. This may seem odd but it’s a very simple 
technique and one that you get used to very quickly, 
particularly when working with animation. 

It’s slightly unfair to describe Canvas as such a 
simplistic drawing tool when in reality it can do so 
much more - for example, it can be used to create 
dynamic graphics, animations, games and data 
visualisations; this is on top of the ability to provide 
basic manipulation of images and video. So in reality, 
with a bit of imagination, Canvas can become a potent 
tool for creating super-immersive and visually 
interesting experiences within the browser. 

Given its graphical nature it’s not shocking to hear 
that Canvas was invented by Apple many years ago. 
They created it for use with the Dashboard widgets, 
like that little black-and-white clock that comes pre¬ 
installed. On the upside this meant Canvas was also 
available within WebKit so it could be used for 
websites, and it didn’t take long for other browsers to 
warm to the app and adopt it themselves. 

It was only fairly recently that this element was 
actually accepted as an official specification and 
bundled within the collection of essential tags that 
make up HTML5. What’s great about this is that 
Canvas support must now be consistent in all the 
browsers that want to support it, which is very good 
news for developers wanting to use it. 


Canvas has fuelled some 
progressive web work that spans 
animation, video and games 


T he HTML5 Canvas element is arguably the 
most important addition to the next-gen 
specification, providing an array of 
possibilities for bringing graphical 
capabilities natively into the browser. As 
well as helping to make Uls richer, it has 
fuelled some progressive web work that 
spans animation, video and games - with the latter 
providing some experimental projects that push 
visual boundaries and those for user interactivity. 

By allowing designers and developers to create 
amazing 2D graphics with relatively little code opens 
up the door to some amazing possibilities in the field 
of image and video manipulation. 

This article defines what Canvas is all about, where 
it came from, what it means to work with and, perhaps 
most importantly, how some of its powerful 
functionality can be used in your own projects. 
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001 <canvas width=”500 


height=”500 


002 


<!— Fallback content —> 


003 </canvas> 


functionality. However, as a result of relatively 
slow mobile hardware and a lack of consistent 
hardware acceleration, performance on 
mobile devices varies considerably, to say the 
least. Therefore, you can expect any Canvas¬ 
intensive applications and animations to run 
much slower on mobile devices than they do 
on the desktop. There isn’t much that can be 
done about this for the time being apart from 
seeing if you can use DOM-based graphics and 
hardware-accelerated CSS3 transitions instead. 
Of course, as time goes on, mobile support will 
improve but it will always be limited by the 
power of the hardware. 

<Anatomy of the element> 

Using Canvas is really straightforward once you 
understand how its various pieces fit together. As 
a whole, Canvas comprises two major parts: the 
DOM element and the accompanying JavaScript 
API. The DOM element places the canvas on a 
page while the JavaScript API is the meaty bit that 
actually does the drawing and image manipulation. 


Canvas is straightforward 
once you understand how its 
various pieces fit together 


<Canvas DOM element> 

The Canvas DOM element is very simple and consists 
of very few components: 


Now, this doesn’t do anything spectacular on its own 
but it does mean that you’ve included a full-blown 
HTML5 canvas within your page. To make it do 
something you need to access the JavaScript API, but 
for now it’s important to understand some of the 
quirks of the DOM element. 

You’ll notice that there are explicit width and height 
attributes defined on the element. These dimensional 
attributes are required if you want to manually define 
the size of the canvas without having to rely on 
JavaScript. Leaving these attributes out will cause the 
canvas to adopt its default size of 300 pixels in width 
by 150 pixels in height. 

It’s also important to know that defining the size of 
a canvas created using this tag with CSS will work, 
however it will actually stretch it rather than resize it. 
This Is something that catches a lot of people out 
when they reach for CSS to rescale the canvas. The 
only way to truly resize the canvas is by editing the 
dimensional attributes on the element itself or 
through the JavaScript API. _ 


<2D rendering context 

As mentioned previously the DOM element is only 
one part of Canvas - the other is the JavaScript API 
that accesses what’s known as the 2D rendering 
context. This is where everything on the canvas is 
actually drawn, while the DOM element is merely a 


<Browser support? 

General support for Canvas is excellent in all major 
and modern browsers. The one exception is that 
Internet Explorer versions 8 and below have 
absolutely no support whatsoever. Although this will 
not be surprising to some people, the good thing is 
that Canvas support in IE9 and onwards is impressive 
and actually performs very well. 

There are a couple of options for those of you who 
very much want Canvas functionality in IE8 and 
below. One workaround is the ExplorerCanvas 
JavaScript plug-in (http://code.google.eom/p/ 
explorercanvas), which basically replicates as much 
of Canvas as possible without requiring any changes 
to your code. Another option is FlashCanvas (http:// 
flashcanvas.net), which falls back on Flash support 
and also requires very little setup. The problem with 
both of these methods is that absolutely everything 
in the Canvas specification is supported and 
performance can often be an issue for complex tasks 
like composite operations. 

Looking back at native implementations of Canvas 
there are a few discrepancies between the browsers 
that support it. One area where things often get a little 
tricky is composite operations, simply because 
various browsers have implemented them in slightly 


Silk is a Canvas application that combines lots of simple 
drawing techniques to produce something visually stunning 


different ways. For most developers this won’t be a 
problem but for those who come to rely on composite 
operations in Canvas you may get frustrated at the 
minor differences in implementation. It’s hoped 
support for composite operations will bee 
consistent in the near future but there isn’t much you 
can do about it for now. 

Another area in which Canvas support can differ is 
with general performance, so as of today there are 
some browsers and platforms that can do things a 
little faster than others. The reason for this is often 
due to the lack of hardware acceleration, particularly 
on Mac browsers. Unfortunately browsers are finding 
it quite difficult to implement hardware acceleration 
on the Mac platform and so right now Canvas is often 
slightly faster on the same browsers in Windows. This 
is why IE performs so well, because it’s easier to do 
hardware acceleration on Windows rather than it 
being something special about IE. Consistent 
hardware acceleration across platforms is another 
thing that is being worked on and it’s likely that 
updates will be seen fairly imminently. 

It’s important not to forget mobile support for 
Canvas as this is where the major differences in 
performance lay. Right now all the major mobile 
platforms support Canvas and the vast majority of its 




window that displays part of the 2D rendering 
context. In fairness, the DOM element is a little more 
than just a window as it’s what provides all the 
JavaScript methods to draw on the 2D rendering 
context, but we’re keeping things simple here. 

The 2D rendering context is much like the majority 
of other screen-based drawing platforms around in 
that it’s based on the Cartesian co-ordinate system. In 
Canvas the origin point of the co-ordinate system 
(0,0) is at the top-left and the co-ordinates move 
positively down and to the right. A general rule of 
thumb is that a single unit in the co-ordinate space 
amounts to one pixel on the screen. 

Accessing the2D rendering context with JavaScript 
is as easy as calling the getContext method of the 
Canvas DOM element, like so: 


001 var canvas = document. 
getElementById(“myCanvas”); var context = 


canvas.getContext(“2d”); 


From here you have full access to all the various 
drawing and image-manipulation methods of the 
API. For example, calling the following 
method would create and place a small black 
square on the canvas: 



;.fillRect(20, 20, 80, 80); 
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In just a few lines you’ve been able to draw a 
simple shape on the canvas, but there’s so much 
more to it than that, as we’re about to see... 

<Canvas graphics principles> 

When you think about how few drawing methods 
there are available to Canvas it can be surprising to 
see the things that can be achieved with it. 

The following are just a few select features that 
provide the building blocks for more advanced 
drawing and image manipulation. 

<Drawing basic geometry> 

You’ve just seen how to draw a square with the 
drawRect method of the 2D rendering context, but 
you can also use the same method to draw rectangles 
of any size in any position. The four arguments of the 
drawRect method are as follows: 


rawRect(x, y, width, height); 


The x and y arguments refer to where on the co¬ 
ordinate system the top-left corner of the rectangle 
will be drawn, and the width and height arguments 
refer to the dimensions of the shape in relation to 
the x and y positions. 

You don’t have to draw filled rectangles, as you can 
also make stroked (outlined) rectangles by calling the 
strokeRect method with the same arguments: 
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Transformations are a 
key part of using Canvas 
to its full potential 


Canvas is also pivotal to rich 
web applications like this 
simple painting and drawing 
editor at http://bomomo.com 


Aside from rectangles you can draw single lines - 
often referred to as paths - and build them up to 
create your own custom shapes. Drawing lines 
requires the use of a few methods: beginPath, 
moveTo,lineTo,closePath, fill and stroke. For example, 
you can create a simple line like this: 


001 context.beginPath(); context.moveTo(20, 
20); context.lineTo(100, 100); context. 
closePathQ; context.strokeQ; 


some of the default constraints of Canvas. 
Transformations let you do things to the 2D rendering 
context, like translating its origin (normally top-left), 
scaling it so anything drawn will be larger/smaller and 
rotating it so things drawn onto it will be at an angle. 

To move the origin of the 2D rendering context 
you’d call the translate method with the desired x and 
y distance from the current origin: 


001 context.translate(100, 100); 


This will draw a line from near the top-left of the 
canvas diagonally down to the right. There is much 
more to paths than this but the main thing is to 
understand that they are the foundation of more 
complex shapes in Canvas. 

One other example of paths that has been made 
easy with a special method is drawing circles. To do 
this you would use the arc method alongside some of 
the path methods you saw previously: 


001 context.beginPath(); context.arc(60, 
60, 40, 0, Math.PI*2, false); context. 
closePathQ; context.fillQ; 


Due to its relative complexity, it’s beyond the scope of 
this article to fully explain how circles work in Canvas 
but the alternative above would draw a full circle that 
is filled in with black. The following is a brief 
explanation of the arc method arguments: 


001 context.arc(x, y, radius, startAngle, 
endAngle, anticlockwise); 


The main difference between arc and other drawing 
methods is that the x and y co-ordinate values refer to 
the centre of the circle, whereas with, say, the 
rectangle they referred to the top-left corner. The 
startAngle and endAngle arguments are also 
interesting because they enable you to draw 
segments of a circle rather than the full thing. 

<Transformations> 

Aside from drawing there are various transform 
methods which each allow you to break free from 


Now that the origin has been moved, anything that is 
drawn from this point onward at (0,0) will appear to 
be drawn at (100,100). This concept can be a little 
tricky to get your head around but it does make sense 
once you’ve tried it out yourself. 

To rescale the 2D rendering context you’d call the 
scale method and pass it x and y multiplier values: 


001 context.scale(2, 2); 


This would cause anything drawn from this point on 
to be twice the size than what it has been described 
as. It’s important to note that this affects the position 
as well as dimensional aspects of drawn elements. 
For example, with a scale of (2,2) a shape drawn at x 
and y position (10,10) will appear to be drawn at 
(20,20). Again, this begins to make more sense when 
you experiment with it yourself. 

Finally, to rotate the 2D rendering context you’d call 
the rotate method and pass it an angle in radians: 


001 context.rotate(Math.PI/4); 


This would twist the 2D rendering context by 45 
degrees and cause anything drawn after this point to 
also be rotated by that amount. However, as well as 
appearing rotated, the shape will be drawn in a 
different position because the entire co-ordinate 
system has altered. Again, this is something that takes 
a little while to get used to and can be mitigated by 
combining rotate with the translate method to rotate 
a shape around a specific point. Learning how to fully 
utilise transformations is an integral part of being 
able to use Canvas to its full potential so it’s well worth 
spending some time getting to know them. 


<Gradient effects> 

Using plain colour in Canvas couldn’t be simpler; it’s 
just a case of setting the fillStyle and strokeStyle 
arguments of the 2D rendering context with a 
legitimate colour value in much the same way as you 
would when working with CSS. However, you can also 
take advantage of fillStyle and strokeStyle to create 
gradated colours by utilisingthecreateLinearGradient 
and createRadialGradient methods: 


001 var gradient = context. 
createLinearGradient(0, 0, 0, canvas.height); 
gradient.addColorStop(0, “rgb(0, 0, 0)”); 
gradient.addColorStop(l, “rgb(255, 255, 
255)”); context.fillStyle = gradient; 
context. fillRect(0, 0, canvas.width, canvas, 
height); 


This will generate a linear gradient object that you 
can manipulate to display the colours you want. In 
this case the gradient will start with black at the top 
and end with white at the bottom (see image over 
the page). By applying the gradient object to the 
fillStyle property any shapes or paths drawn from 
this point on will also have a gradient fill. 

Gradients in Canvas can be a little confusing to fully 
grasp - particularly radial gradients. The best way to 
get to grips with them is to play around with the code 
and see how they work in practice. 



Apple invented HTlViu> 
widgets like this little clock 


jfjTVILS Canvas to draw Dashboard 
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FEATURED PROJECT 

Soul Reaper 



SOUL-REAPER.COM 

Saizen Media, http://saizenmedia.com 


HTML5 SCROLL BOOK 


WE TAKE A LOOK AT HOW CANVAS IS BEING USED IN THE REAL WORLD 
WITH THE BRAND-NEW DIGITAL COMIC BOOK SOUL REAPER 


F or those who don’t already know, Soul 
Reaper is positioning itself as the first 
HTML5 scroll-activated digital comic 
book. The design team at Saizen Media 
have developed a brand-new approach 
that applies the new capabilities of 
HTML5 and CSS Canvas animations to 
storytelling and narrative, therefore creating a 
fully immersive, interactive experience. The 
HTML5 scroll book enables the user to become 
an active part of the story and have full control of 
the motion and interaction with the visuals. 
Though when in ‘Couch mode’ the user can sit 
back and simply watch events unwind, while a 
voiceover narration reads the dialogue and 
guides them through the story. Soul Reaper- 
Episode 7 is the first chapter in the saga, an 
original comic book entirely created and 
illustrated by Saizen Media to take full advantage 
of the HTML5 scroll book tech. The Soul Reaper 
Mobile Scroll Book App for iOS and Android 
handheld devices is currently in production and 
scheduled for release this month. 

Seeing as the project relies so heavily on 
HTML5 and Canvas-based technology, we spoke 



to Saizen Media’s CEO and creative director, 
Davide Bianca, to ask about the specific role it 
played within the development process. He 
explains: “The truth is that Canvas was used as a 
raster bitmap mapping tool of the images, as 
there is no real-time vector mapping due to the 
heavy detail-oriented nature of the imagery and 
art direction itself. Each box is a canvas of its 
own, and within each div we used CSS and 
jQuery for animation, with CSS to mask overflow, 
as well as to handle fades and transitions. 

“If the illustration style would have allowed for 
full vector. Canvas would have come in more 
handy for actual HTML5 drawing, real-time text 
effects, etc (which is what we are doing for 
another cartoon-style scroll book project at the 
moment). However, in the case of the Soul 
Reaper scroll book the features of HTML5 we 
took advantage of the most were HTML5 
preloading, the synchronised audio and audio 
looping (with browser-specific audio support in 
OGG and MP3 formats), and most importantly 
cross-platform compatibility, which was vital for 
the mobile version of the scroll book. 

“We originally had more HTML5-specific 
features, but we stripped it back and swapped 
some of the code due to poor browser-specific 
performance in terms of memory leaks/CPU 
hogging, etc. The site performance was 
drastically different from browser to browser due 
to the various memory-handling features of each 
browser and CPU/GPU handling - Chrome 
performed the best, followed by Safari - so, in 
order to obtain a solid result across all platforms, 
we had to ditch some features. 

“Overall, however, it is important to note that 
the tech was never the primary focus of the 
project, but rather the story and experience as a 
whole with a very strong focus on smoothness of 
the animations, so while HTML5 was the tool that 
enabled us to create a unigue experience across 
all devices - without which the scroll book 
wouldn’t have been possible - the memory- 
related issues with HTML5 forced us to make 
some [sacrifices] to keep the performance high 
[so as not to compromise the storytelling].” 



Expect to see the full Soul Reaper 
experience rolled out across 
mobile devices this month 


Compatibility with Android and iOS 
devices such as the iPad is a critical 
thing for HTML5 and Canvas 
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<Loading images and video 

One of the most powerful features of Canvas is its 
ability to display and manipulate images and video. 
You can load any image, HTML5 video element, or 
even another canvas directly into the one you’re 
working with or create your own with JavaScript: 


The drawlmage function can take a variety of 
arguments that define: where to draw the image, 
video or canvas, an area to crop the image to and the 
output dimensions to draw the image onto the canvas 
(allowing you to resize it, if you want). 

Displaying images on the canvas is only the 
beginning. Things get really interesting when you 
access pixel-level data for the canvas using the 
getlmageData method, edit those pixels somehow 
and draw them back to the canvas using the 
putlmageData method. With this you could turn a 
colour video into black and white in real-time, or 
create a basic web-based image editor or whatever 
else you can imagine doing with pixels. 

Mastering the manipulation of pixels in Canvas is a 
big step in turning it from a simple drawing platform 
into an incredibly powerful tool for displaying and 
editing visual media on the web. 


cCanvas In context? 

When talking about Canvas it’s important to put it in 
context with the other online technologies. Below we 
consider a few of the big players. 


Canvas is often compared to Flash and sometimes 
referred to as a ‘Flash killer’, or it’s stated that Flash is 
better than Canvas. Both of these statements are 
irrelevant as the apps serve two different purposes. 

Flash was created a long time ago when visual 
media on the web was in a pretty poor state. Since 
then it has evolved to solve issues surrounding things 
like animation, video and games. At the time of its 
creation there wasn’t anything like Canvas within the 
browser so Flash was the only option available. Flash 
was a lifeline for many web designers. Flash has since 
turned into a major platform for multimedia online 
and it won’t be going anywhere soon. 

On the other hand, Canvas has been created to 
provide a method of drawing and manipulating visual 
media within a browser without an external plug-in. 
Part of the beauty of Canvas is that it is closely linked 
with HTML and JavaScript, which means that data can 
be quickly and easily shared between Canvas and 
other parts of a website or web app. 

Canvas has been created to replace Flash - or to be 
more accurate, Canvas has been created to offer a 
legitimate alternative to Flash that fits the web in a 
better way. If you’re not developing for the web, or 


001 var image = new Image(); image.onload 


functionQ { 


context.drawlmage(image 


0); }; image.src = “mylmage.jpg” 


The forces of hell have been 
unleashed on Earth - can Alex, 
aka Soul Reaper, stop them? 


As well as Canvas, Soul Reaper 
takes advantage of HTML5 
preloading, synchronised audio 
looping with MP3/OGG support 
and cross-platform compatibility 
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Canvas doesn’t do what you need it to, then using 
Flash is the only logical option open to you. 

There is actually a lot that JavaScript developers 
can learn from Flash developers and it’s good to see 
this is already happening to some extent today. The 
Flash guys are the people who have been dealing 
with all the little visual-media issues for many years 
and have come up with lots of techniques to solve 
them. Canvas developers should embrace this 
knowledge rather than cast it aside. 

<CSS3 and jQuery> 

The other visual solutions on the web right now are 
CSS3 and jQuery; with CSS providing rich control of 
the styling of websites and jQuery allowing for slick 
animation and behavioural controls of media. Canvas 
is not here to replace either of these technologies - 
however it can complement them. 

For example, there are some great jQuery plug-ins 
out there that utilise Canvas in some way or another. 
Flot (http://code.google.eom/p/flot) is one that 
enables you to produce visually interesting graphs in 
Canvas while using the existing workflow that you’re 
familiar with in jQuery. 


<The creative canvas> 

Over the past few years there have been some 
incredible examples of Canvas in the wild. The 
following are just a few of the most interesting; find 
more on this regularly updated list of bookmarks: 

http://pinboard.in/u:robhawkes/t:canvas. 

<Using Canvas as CSS backgrounds 
on HTML5 Doctor> 

A powerful example of Canvas in action is the HTML5 
Element Index on the HTML5 Doctor website (http:// 
html5doctor.com). Canvas has been used to create 
custom rollover graphics on the fly for every single 
item in the navigation. Without Canvas this would 
have required tens - if not hundreds - of custom 
images. With Canvas this needed just a small amount 
of JavaScript and a bit of imagination. 

<Silk> 

One of the most beautiful examples of Canvas is the 
Silk experiment (http://weavesilk.com). Described as 
a magical artwork, Silk shows just how the simple 
drawing methods in Canvas can be combined to 
create a visually stunning interactive display. 


<HTML5 video ambilight> 

Ever seen those TVs that have lights around the edge 
that make the wall behind appear to glow a similar 
colour to what’s playing on the screen? Well, this 
effect has been developed in Canvas for HTML5 
video and it creates an incredibly immersive 
experience. For one example of this in action, visit 
http://paulrouget.com/bgvideo. 

In a nutshell, each frame of the video is drawn onto 
a canvas and the pixel colour values are gathered in 
turn. Those values are then used to create a beautiful 
gradient background for the page that really makes 
the video stand out. 

<Wrappingup> 

That brings us to the end of our roundup of Canvas. 
The hope is that this brief overview of the mighty tag 
has given you an insight into its immense potential for 
the future of web design. It’s now impossible to ignore 
Canvas if you’re thinking about designing for the 
internet - particularly if you want to break away from 
the current reliance on software like Flash. 

If Canvas excites you then we strongly encourage 
you to set aside some time to experiment with it. 
You’ll find that it’s not as difficult to learn as it may 
initially seem and you’ll be quickly impressed by the 
power and flexibility it can offer. 

There’s no doubt that we’re only seeing the 
beginning bf what’s possible on the web when 
technologies like Canvas are fully harnessed. With 
Canvas now being used in other areas like web games 
you can be confident that the future has some major 
developments in store for this element. 


It’s now impossible to ignore 
Canvas if you’re thinking about 
designing for the internet 


This demonstration of true eight-bit Canvas colour cycling with 
HTML5 features art by Mark Ferrari and code from Joseph 
Huckaby (www.effectgames.com/demos/canvascycle) 


i ne ^anvas-Dasea imerpreiauon oi me classic 
first-person shooter Wolfenstein 3D can be viewed 
and played at www.nihilogic.dk/labs/wolf 
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Interactive animations with Canvas and EaselJS 


Interactive 
animations 
with Canvas 
and EaseUS 

Build a character controlled by cursor 
keys with Flash-like functionality 

tools I tecli I trends EaselJS, Zoe, Flash, Dreamweaver 
export Mark Shufflebottom 



FI 


HTML 

5 
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ne of the most exciting 
features of HTML5 is the 
Canvas element. Canvas is 
a drawable bitmap region 
that can be directly 
manipulated through JS 
code. It has width and 
height attributes so it can 
be positioned within an 
existing DOM layout. 

One of the major drawbacks to Canvas is selecting 
individual elements; JavaScript cannot detect these 
automatically as it can only discern DOM elements, ie 
the whole canvas, rather than particular features. 

To get round this you have to manually work out the 
click position and what might be underneath. As there is 
no display list this can be problematic. EaselJS gives us 
a display list so we can easily access specific elements, 
make them clickable, and so controllable. In this tutorial 
we create a sprite sheet - a single image containing 
many frames of animation. We’ll then edit how this 
sprite moves and animates around the page. 



EaselJS gives us a display list so we 
can easily access specific elements 



01 Get the frameworks 


To begin you will need to get the latest version 
of EaselJS by Grant Skinner from GitHub (https:// 
github.com/gskinner/EaselJS). We are using version 
0.4 so click the ZIP button to download. Next we need 
our sprite sheet creator, Zoe, from http://easeljs.com/ 
zoe.html. This converts SWF animation to sprite sheets. 



02 Launch Flash 


Install Zoe, copy the Start folder from the cover 
disc to the desktop and then launch Flash and open 
‘sprite.fla’. We are now going to convert a SWF to a sprite 
sheet. Click on frame 1 of the graphics layer and choose 
File>lmport to Stage. Open ‘wkRightOOl.png’ from the 
Assets folder before clicking Yes in the next window to 
import the entire sequence. 
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Interactive animations with Canvas and EaselJS 


Fetch the animation 

Select frame 21 and press F7 to add a blank 
keyframe. Repeat the import process with ‘wkUpOOI. 
png’. Select frame 41 and hit F7, then import 
‘wkDownOOl.png’. You will now have three directions for 
your player to walk. To get the left walk clip we will 
simply flip the right walk clip using EaselJS later. 






Add the registration point 

Select frame 1 of the registration clip layer and 
drag the regPoint clip from the library to the stage. 
Position this at 50 pixels on the X axis and 145 pixels 
on the Y axis. In the Properties panel select the 
Instance Name and give the clip the name 
‘registrationPoint’ or something similar. 



Frame labels 

Select frame 1 of the labels layer, then in the 
Properties panel add the frame label of ‘wkRight’. Select 
frame 21, press F6 to add a keyframe and add the 
frame label ‘wkUp’. Finally repeat on frame 41, adding a 
keyframe, then the label of ‘wkDown’. This will give us 
names to control the movement in our code. 
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Export the SWF 

We now need to export this file 
as a SWF so that we can turn that into a 
sprite sheet inside the Zoe app. This can 
be done by pressing Cmd/Ctrl+Return, 
which will generate ‘sprite.swf in the 
same directory. Quit Flash now and start 
up Zoe, which will be located in your 
Applications folder. 


Import the SWF 

Once you have launched Zoe you 
can either browse for a SWF in the app 
or drag the relevant SWF into it. It takes 
a few moments for Zoe to analyse the 
frame data and it will play the animation 
when complete. If you change the Play 
All drop menu to one of the loops you 
can see your individual animation. 


What’s JSON? 

JSON files are JS Object 
Notation files and are 
useful for storing data 
because it is usually a 
named pair list or an 
ordered list of values 
that are human and 
computer readable. 


Export the sprite sheet 

Click on the Export tab and make sure that the 
SpriteSheet checkbox is ticked. The Format should be 
Web and the data set to JSON. Once done click the 
Export button in the top-right of the interface. This 
will generate a JSON file and a PNG image. 


Move the image 

You will be prompted to view 
the export folder; accept this and move the ‘sprite.png’ 
into the Img folder, just to keep our files tidy. Before 
continuing it’s probably a good idea to examine the 
image and the JSON file. The JSON file can be opened 
in Dreamweaver or a similar text editor. 
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Building the 
character animation 



01 _Create a character 

To make the animation for our character 
we used Poser by Smith Micro, a specific 
3D character animation package. 
Characters can be created from presets or 
bought from third-party vendors. 



02 _Walk the walk 

Firing the Walk Designer allows you to set 
the character’s walk style and length of 
loop. We have set our character to have a 
20-frame animation loop and told the 
character to walk on the spot. 



03 _Export the animation 


Using PNG files for a transparent 
background the character is set to export 
at a suitable size. The animation is 
generated with a frame number on the 
end; Flash can easily import these as it 
recognises the numerical sequence. 
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Interactive animations with Canvas and EaselJS 


LinktoEaseIJS 

Open ‘start.html’ in Dreamweaver or a similar 
text editor and take a look at the code. There is a 
canvas element in the body and some CSS to do basic 
styling. In the head section add the code shown below. 
This links to the Easel library and all the remaining code 
we write will go inside the empty script tags. 

001 <script src="lib/easel.js"></script> 

002 <script> 

003 </script> 

Essential variables 

Now insert the following code inside the script 
tags which we added in the previous step. These 
variables control useful information such as linking to 
the canvas, loading an image and referring to the player. 
The remaining three variables all control the registering 
of key presses for movement. 

001 var canvas; 

002 var stage; 

003 var img; 

004 var player; 

005 var lfHeld; 

006 var rtHeld; 

007 var keyDn=false; 

Register handlers 

These two small lines of code register the event 
handlers that will detect if a key is pressed or released, 
which is essential for creating our interactive walking 
character. In turn these will trigger two functions - 
handleKeyDown and handleKeyUp - that we will add 
at the very end of this tutorial. 

001 document.onkeydown=handleKeyDown; 

002 document. onkeyup=handleKeyllp; 

Call the display list 

Once our content is loaded the init function is 
automatically triggered. In this code we add a reference 
to the canvas element with documentgetElementByld 
and set up a stage on there. This is a unique feature to 
EaselJS and it emulates a display list you would find in 
Flash. We then load our image and, immediately after, 
the handlelmageLoad function is called. 

001 function init() { 

002 canvas = document. 
getElementById("canvas"); 

003 
004 
005 
006 
007 } 


stage = new Stage(canvas); 
img = new Image(); 
img.src = "img/sprite.png"; 
img.onload = handlelmageLoad; 



<2\bove, left to rigliO 

• The start file has some basic CSS in place 
that puts an image in the background of the 
canvas element. This can be done in Canvas 
directly, but we’ve done it here to save time 

• We bring the JSON data into our page so 
that we can take control of the built-in 
animations directly from this file 

<lliglit> 

• We use the addFlippedFrames command to 
get the left direction animation by flipping the 
animation to the right. This saves on file size 



Set the animations 

When the animation loads we are going to grab 
the height and width of the canvas then, with the sprite 


sheet, we are going to set out frame and animation 
data. This is the data that was exported in the JSON file 
from Zoe earlier, so you may want to refer back to that 
file just to see how it’s applied here. 

001 function handlelmageLoad(event) { 

002 var w = canvas.width; 

003 var h = canvas.height; 

004 var spriteSheet = new SpriteSheet({ 

005 images: [img], 

006 frames: {"count": 60, "width": 94, 

"height": 158, "regX": 48.5, "regY": 147.45}, 
007 animations: { 

008 wkRight: [0, 19, "wkRight"], 

009 wkUp: [20, 39, "wkUp"], 

010 wkDown: [40, 59, "wkDown"] 

011 } 

012 }); 

Flip the sprite sheet 

Here we call a command to add flipped frames, 
which means Easel takes every frame and flips it 
horizontally. Next we set up the player variable to be 
the bitmap animation from the sprite sheet, before 
positioning the player on the stage and adding it. The 
Ticker is then set, which runs at 30 frames per second. 

001 SpriteSheetUtils. 
addFlippedFrames(spriteSheet, true, false, 
false); 

002 player = new 
BitmapAnimation(spriteSheet); 

003 player.gotoAndStop("wkRight"); 

004 player.x = canvas.width/2; 




Making it tick 

There are two commands 
in Easel that cause code 
to be run every frame. The 
Ticker sets the Tick 
function to be called every 
frame - so we need both. 

These can set the 
frame rate as well. 


005 player.y = 350; 

006 stage.addChild(player); 

007 Ticker.addListener(window); 

008 Ticker.setFPS ( 30 ); 

009 } 

Handling errors 

™ Just in case we get a 404 error and the image 
cannot be found we output the error to the console log 
for Safari and Chrome. This is useful to check just in 
case something isn’t quite working, however once it’s 
fully operational you might want to remove this from 
your code to keep things as tight as possible. 

001 function handlelmageError(e) { 

002 console.log("Error Loading Image : " + 
e.target.src); 

l 03 > 

Move the player 

If the variable lfHeld is set to true, which 
happens when the user pushes the left cursor key, then 
we move the character five pixels to the left. As you’d 
expect, the whole thing is sent in the opposite direction 
if the rtHeld key is down, which will be triggered in the 
key down handler that we will create shortly. 
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Interactive animations with Canvas and EaselJS 


001 

function tick() { 

002 

if(lfHeld){ 

003 

player.x-=5; 

004 

} 

005 

if(rtHeld){ 

006 

player.x+=5; 

007 

} 


On two conditions.. 


The code below checks if the keyDn variable is 
false - ie we’re not already pressing the key. We set the 
correct animation to play if this is false - we then 
immediately set the keyDn variable to true. This stops 
the animation from just stalling on the first frame and 
gives us the correct animation that’s playing. 


001 

if(lfHeld && keyDn==false){ 

002 

player.gotoAndPlay("wkRight_h"); 

003 

keyDn=true; 

004 

} 

005 

if(rtHeld && keyDn==false){ 

006 

player.gotoAndPlay("wkRight"); 

007 

keyDn=true; 

008 

} 

009 

stage.update(); 

010 

} 


19 Check the key is down 


Next we add a function that gets called when 
any key is pressed. There’s a switch statement here that 
just sets our IfHeld and rtHeld variable to true if either of 
these are pressed. The first line of the function helps to 
make it work across different browsers. 


001 

function handleKeyDown(e) { 

002 

003 

if(!e){ var e = window.event; } 
switch(e.keyCode) { 

004 

case 37: IfHeld = true; break; 

005 

case 39: rtHeld = true; break; 

006 

} 

007 

} 


Check the key is up 

Finally we check if either the left or right key is 
up and then set the appropriate animation to stop and 
turn off any variables that have been active. It’s fairly 
easy for you from this point to add extra code to move 
up and down as they’re included in the sprite sheet - 
why not give this a go on your own? 


001 

002 

function handleKeyllp(e) { 

if(!e){ var e = window.event; } 

003 

switch(e.keyCode) { 

004 case 37: player.gotoAndStop("wkRight_h 

");keyDn=false;IfHeld = false; break; 

005 

case 39: player.gotoAndStop("wkRight") 

;keyDn=false;rtHeld = false; break; 

006 } 

007 

} 

008 




Code library 

Creating the animated sprite 

Here we reveal exactly how the sprite sheet is loaded and how the individual 
frames are manipulated to deliver an animated walking character 


The spriteSheet variable 
creates a new sprite sheet 
object and this stores 
information such as 
frame size and number of 
frames per sequence. 


The addFlippedFrames 
function enables us to 
flip our existing frames; 
here we’re saying we 
want to flip horizontally 
by setting the first 
argument to true. 


The player variable sets 
up our animated bitmap 
from the sprite sheet and 
uses Flash-friendly terms 
such as gotoAndStop 
and addChild to place 
on the stage. 


The tick function runs at 
30 frames per second 
and variables are passed 
in here from the event 
handlers that detect key 
presses. The animation is 
suitably changed here to 
update the screen. 


001 function handlelmageLoad(event) { 

002 var w = canvas.width; 

003 var h = canvas.height; 

004 var spriteSheet = new SpriteSheet({ 

005 images: [img], 

006 frames: {"count": 60, "width": 94, "height": 158, 

"regX": 48.5, "regY": 147.45}, 

007 animations: { 

008 wkRight: [0, 19, "wkRight"], 

009 wkllp: [20, 39, "wkllp"], 

010 wkDown: [40, 59, "wkDown"] 

011 } 

012 }); 

013 SpriteSheetUtils.addFlippedFrames(spriteSheet, true, 
false, false); 

014 

015 player = new BitmapAnimation(spriteSheet); 

016 player.gotoAndStop("wkRight"); 

017 player.x = canvas.width/2; 

018 player.y = 350; 

019 stage.addChild(player); 

020 Ticker.addListener(window); 

021 Ticker.setFPS ( 30 ); 

022 } 

023 function tick() { 

024 if(lfHeld){ 

025 player.x-=5; 

026 } 

027 if(rtHeld){ 

028 player.x+=5; 

029 } 

030 if(lfHeld && keyDn==false){ 

031 player.gotoAndPlay("wkRight_h"); 

032 keyDn=true; 

033 } 

034 if(rtHeld && keyDn==false){ 

035 player.gotoAndPlay("wkRight"); 

036 keyDn=true; 

037 } 

038 stage.update(); 

039 } 
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Create a 3D image gallery with CSS3 


Create a 3D 
image gallery 
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withCSS3 

CSS3 enables us to visualise all sorts ot 
new user interactions, including the 
rotation ot the entire viewport 

tools I tecli I trends Graphic editor (Photoshop or your preferred editor), 
HTML editor (we used Dreamweaver, but any will do) 
expert Sam Hampton-Smith 



h, the image gallery; a common part 
of modern web design, the gallery has 
been through numerous guises in the 
life of the web. Originally whole pieces of 
software were available to automate the 
generation of web galleries, and even the 
likes of Photoshop included a function to 
automatically create a thumbnail, large 
version and the HTML to link the two 
together. On the modern web, however, a 
click-and-wait-for-it-to-load approach no longer meets 
user expectations and, with the advent of CSS3, 
increasingly users expect to see a bit of visual flair 
beyond the standard lightbox effect that has become so 
popular. In times gone by, the only way to render a 3D 
effect inside a browser was using the Flash plug-in, but 
those days are gone as WebKit-powered browsers such 
as Safari and Chrome now support native 3D animation 
and transformation using CSS3 alone. 

In this tutorial we’re going to do exactly that - well 
take a two-dimensional image gallery and provide a 
twist when the user clicks on a thumbnail - quite literally. 
As the click occurs, the whole window contents will 
rotate out of view to reveal the larger version of the 
image. All the animation and 3D manipulation will be 
handled with CSS, although we will use a little jQuery 
to help us set everything up correctly. 

On the modern web, however, a 
click-and-wait-for-it-to-load approach 
no longer meets user expectations 



Source some images 

We’re creating an image gallery in this tutorial, so 
the first thing we’ll need is some images to work with! 
These can be of anything you like, but if you want to 
follow along with the images that we used, check the 
CD for a link to the references we downloaded from the 
brilliant free photo resource www.sxc.hu. 

Crop and treat images 

We’ll need two versions of each image - a small 
one at 600px wide and 338px tall, and a big one at 
1,920 x 1,200px. Both sizes are 16:9 so crop them to this 
dimension, and at the same time we apply a slight 
colour treatment to make them feel part of the same 
set. Use the image editor of your choice and a Curves 
adjustment to reduce the blue tones. Save each into the 
images>small and images>big folders, respectively. 


Add some texture 

Locate a nice textured image on the web and 
crop a section. Use the Clone Stamp tool or the Spot 
Healing Brush to reduce contrast and noticeable 
features, then apply Filter>Other>Offset (if using 
Photoshop) or the equivalent to move the edges of the 
image to the centre. Repeat the cloning to get a perfect 
tiled image, then save as a JPEG in the styles folder. 

Create your HTML 

Our HTML is pretty simple, comprising a couple 
of unordered lists containing images and links to select 
images, and a few nested <div> tags. We’ll need all those 
<divs> to handle the 3D rotation later on. In the 
meantime, add the code below, or open up our start 
document from the cover disc. 


001 

<!DOCTYPE HTML> 

002 

<html> 

003 

<head> 

004 

<meta http-equiv="Content-Type" 

content="text/html; charset=UTF-8"> 

005 

<title>3D CSS3 Gallery</title> 

006 

<link href="styles/screen.css" 

type^ 

="text/css" rel="stylesheet" /> 

007<script src="scripts/jquery. js"x/ script> 

008 

<scriptx/script> 

009 

</head> 

010 

<body> 

011 

<div id="stage"> 

012 

<div id="rotate"> 

013 

<div id="container"> 

014 

<hl>3D CSS3 SLIDESHOW</hl> 

015 

<ul class="thumbnails"> 

016 

<li id="imgl"ximg 


src="images/small/l.jpg" rel="images/large/l. 
jpg" width="600" height="338" alt="Photo 1" 
/><span>0n the beach...</span></li> 

017 <li id="img2"ximg 

src="images/ small/2.jpg" rel="images/large/2. 
jpg" width="600" height="338" alt="Photo 2" 
/Xspan>In your home.. .</spanx/li> 
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Create a 3D image gallery with CSS3 




<Above> 

• The basic unstyled page looks pretty 
ugly, but a little bit of CSS will quickly 
solve that problem! 

lop tobottoin> 

• We prepare and treat each of our 
images into a small thumbnail version 
and a large version to fill the window 

• We’ve created a seamless texture 
inside Photoshop using a texture map 
and a colour cast to create a blue hue 


020 

height: 

338px; 

021 

overflow: 

hidden; 

022 

-webkit-box-shadow: 0px 5px 10px #333; 

023 

box-shadow:0px 5px 10px #333; 

024 

border: 

6px solid white; 

025 

} 


026 

#container 

ul.thumbnails li { 

027 

position: 

relative; 

028 

float: 

left; 

029 

margin: 

0; 

030 

padding: 

0; 

031 

list-style: none; 

032 

cursor: 

pointer; 

033 

} 



Getting the captions 

Each image in our thumbnail set has an 
accompanying caption which we want to position over 
the top of the image as a partially transparent bar. Using 
RGBA to specify the background colour of an element 
allows us to set the alpha (or transparency) to suit our 
needs. Add the code below to your stylesheet to see 
this in action, and experiment with values between 0 
and 1 for the alpha to see what effect it has. 


018 

<li id="img3"ximg 

src= 

images/ small/3.jpg” rel="images/large/3. 

jpg' 

' width=”600” height="338" alt=”Photo 3" 

/><span>Red shoes.. .</spanx/li> 

019 

<li id=”img4"ximg 

src= 

^"images/ small/4.jpg” rel=”images/large/4. 

jpg' 

' width=”600” height=”338” alt=”Photo 4” 

/><span>And blue laces</span></li> 

020 

<li id=”img5”ximg 

src= 

^'images/ small/5.jpg” rel=”images/large/5. 

jpg' 

' width=”600” height=”338” alt=”Photo 5” 

/><span>Tied up tight</span></li> 

021 

</ul> 

022 

<ul class=”thumblinks”> 

023 

<lixa href=”#imgl” 

class="selected">Image l</ax/li> 

024 

<lixa href=”#img2”>Image 2</ax/li> 

025 

<lixa href=”#img3”>Image 3</ax/li> 

026 

<lixa href=”#img4”>Image 4</ax/li> 

027 

<lixa href=”#img5”>Image 5</ax/li> 

028 

</ul> 

029 

</div> 

030 

<div id=”bottom”> 

031 

<img src=”images/large/1.jpg” 

width="1920" height=”1200” alt="Image 1" /> 

032 

</divx/div> 

033 

</div> 

034 

</body> 

035 

</html> 


Add a stylesheet 

Unstyled the page looks pretty ugly, but once 
we’ve added some basic CSS this will all change. Let’s 
find somewhere to store our styles by creating a 


reference to an external stylesheet. Add the code 
shown below and create a new blank document, saving 
it as ‘screen.css’ in the styles folder. 

001 <link rel="stylesheet” type=”text/css” 
href="styles/screen.css" /> 

Basic styles 

Let’s get some simple styles in place to establish 
the main build. The background is going to be set to a 
dark colour, while the container will use the texture we 
created in step 3. We’ll also work in some style to the 
thumbnails list. Add this code to your stylesheet: 


001 

body { 

002 

margin: 0; 

003 

padding: 0; 

004 

background: #333; 

005 

} 

006 

#container { 

007 

position: relative; 

008 

width: 100%; 

009 

height: 600px; 

010 

padding-top:50px; 

011 

text-align: center; 

012 

background: transparent 


url(backgroundtexture.jpg) repeat top left; 


013 

} 


014 

#container 

ul.thumbnails { 

015 

position 

:relative; 

016 

margin: 

0; 

017 

margin: 

auto; 

018 

padding: 

0; 

019 

width: 

600px; 


001 

#container 

ul.thumbnails li span { 

002 

position:absolute; 

003 

background: rgba(0,0,0,0.5); 

004 

width: 

520px; 

005 

006 

height: 

color: 

20px; 

#fff; 

007 

padding: 

40px; 

008 

bottom: 

0; 

009 

left: 

0; 

010 

} 



Style the links 

If you load the page now you’ll see the 
thumbnails are displaying correctly, with just the first 
shown. We need to set up the styles for the links to 
allow the user to switch between different thumbnails. 
We’ll use the CSS3 border-radius attribute to create 
circular buttons for each thumbnail. Add the code 
below to your stylesheet to implement this: 


001 

#container ul.thumblinks { 

002 

position:relative; 

003 

margin: 0; 

004 

padding: 0; 

005 

margin-top: 20px; 

006 

} 

007 

#container ul.thumblinks li { 

008 

list-style: none; 

009 

padding: 0; 

010 

margin: 0; 

011 

display: inline-block; 

012 

width: 20px; 

013 

height: 20px; 

014 

overflow:hidden; 

015 

margin-right:5px; 
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Create a 3D image gallery with CSS3 



Why only WebKit? 

CSS3 is still being implemented 
by browser vendors, and the 
specification is up for debate. 
As a result, only WebKit-based 
browsers currently support 3D 
transformations and 
transitions, but more 
may follow soon! 


Making sense of it 

The code we just added grabs the href from the 
link and uses it to find the right <li> in the unordered 
thumbnails list. Once it has the right one, it grabs the big 
image reference and sets the big image src attribute to 
match. It then moves the correct <li> to the front of the 
stack in the thumbnails list and updates the ‘selected’ 
class on the links list to the selected link. Phew! 


Transform into 3D 

Everything is set for us to make the move to 3D 
inside our page, so let’s get started with the CSS code 
we need to achieve this. We’re creating two faces of a 
box - the front face is the ‘container’ <div> and the 
bottom face is ‘bottom’. The box itself is called rotate, 
while the 3D stage is called stage, appropriately enough. 


016 -webkit-border-radius:10px; 

017 border-radius:10px; 


018 

border-right: 

lpx solid #fff; 

019 

border-bottom: 

lpx solid #fff; 

020 

border-top: 

lpx solid #aaa; 

021 

border-left: 

lpx solid #aaa; 

022 

background: 

rgba(0,0,0,0.01); 

023 

text-align: 

center; 

024 

} 


025 

#container ul.thumblinks li a { 

026 

display: block; 


027 

overflow: hidden; 


028 

width: 16px; 


029 

height: 16px; 


030 

text-indent: 

-10000px; 

031 

text-decoration: 

none; 

032 

-webkit-border-radius:8px; 

033 

border-radius:8px; 

034 

margin-top: 2px; 


035 

margin-left: 2px; 


036 

} 


037 

#container ul.thumblinks li a:hover, 

#container ul.thumblinks li a.selected { 

038 

background: rgba(0,0,0,0.8); 

039 

} 



001 <link href=’http://fonts.googleapis. 
com/css?family=Coda:400,800’ rel=’stylesheet’ 
type=’text/css’> 

002 body { 

003 margin: 


004 
005 
006 
007 
008 } 


0 ; 

padding: 0; 
background: 
font-family: 


#333; 

’Coda’ 


sans-serif; 


text-transform: uppercase; 


Script to switch 

Currently when we click on a circular button, 
the thumbnail changes, however the big version of the 
image does not. To remedy this, we have to apply some 
jQuery code along with a little JavaScript to avoid the 
annoying skip that happens whenever we click on a 
link. Finally, we can update the highlighted button at 
the same time - just add the code below inside the 
<script> tags at the top of your page. 

001 $(document).ready(function(){ 

002 $(".thumblinks li a”).click(function(){ 

003 event.preventDefault() 

004 reference = $(this).attr("href"); 


<Far left from lop, «:lo«:kwiso> 

• We’ve been inspired to write this 
tutorial by the excellent Codrops 
blog (http://tympanus.net/ 
codrops), which recently featured 
a similar effect to this one 

• The animation runs automatically 
when you click on a thumbnail, 
thanks to the webkit-transition 
property set in step 12 

• The final effect is a wonderfully 
smooth 3D rotation from 
thumbnail to full-window image, 
with an obvious 3D scene sitting 
behind the page content 

• The #bottom <div> has now been 
hidden as it is rotated through 90 
degrees about the X axis, making it 
edge-on towards the viewer 


005$(".thumblinks li a"). 


Add the code below to get going: 


Add a new font 

We can add a custom font using only CSS by 
taking advantage of Google Web Fonts, which require 
no JavaScript. Let’s do that to improve the appearance 
of our page. Head to www.google.com/webfonts and 
choose a typeface to suit (we opted for Coda). Add the 
<link> code provided to your HTML <head> and the 
font-family example to your body CSS rules. 


removeClass("selected"); 


006 

$(this).addClass("selected"); 

007 

$(".thumbnails li:first"). 

before($(reference)); 

008 

$("#bottom img"). 

attr(' 

’src",$(reference+" img").attr("rel")); 

009 

}); 

010 

»; 



001 #stage { 

002 -webkit-perspective: 2500; 

003 position: relative; 

004 } 

005 #rotate { 

006 -webkit-transform-origin: 0 0; 

007-webkit-transform-style: preserve-3d; 
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Create a 3D image gallery with CSS3 



Getting to know CSS3 
3D transformations 


CSS3 has brought some really exciting 
innovations to the browser, including 
the ability to render 3D effects 
natively inside WebKit-based 
browsers for the first time. The effects 
are smooth, fluid and ultimately can 
add a bit of panache to your user 
interactions, but they can also make 
you want to pull your hair out when 
you’re developing them! 

It helps to have a basic 
understanding of how a 3D scene is 
constructed and the relative space 
between elements within a scene. We 
don’t have nearly enough room in this 
tutorial to do the subject justice, but 
the web is full of fantastic resources to 
help you get your head around how 
WebKit works with 3D. 

Have a look at some of the 
suggested links below to get a better 
handle on how to render three- 
dimensional effects without giving 
yourself a headache in the process! 

- www.eleqtriq.com/2010/05/ 
understanding-css-3d-transforms 

- www.webkit.org/blog/386/3d- 
transforms 

- www.w3schools.com/css3/ 
css3_3dtransforms.asp 

-http://tinyurl.com/3dtransforms 


What’s going on? 

It’s worth pausing to break down the code we 
just added. Firstly, the stage enables us to specify the 
perspective for our 3D scene. The rotate box code sets 
the point of rotation with the transform-origin attribute 
and also some basic properties for the animation well 
see in action in the next few steps. Well add a rotation 
to #bottom shortly to make it the base of the box. 

Rotate your #bottom 

We want the image in the #bottom <div> to fill 
our browser window, so we can’t specify the rotation 
directly in our stylesheet as we don’t know how big the 
user’s browser window is. Instead we’ll use some 
JavaScript code to work this out and set the CSS 
programmatically. Add the code below to the existing 
jQuery $(document).ready() function. 


001 winhe: 
($(wind< 
002 
(wi 
06 

m < 


Play with 
perspective 

We’ve set the value for the 
‘stage’ perspective at 2,500, 
but this isn’t set in stone. 
Experiment with values 
between 500 and 5,000 
to see what you prefer. 


001 winheight=parselnt 
($(window).height()); 

002 winwidth=parselnt($ 
(window).width()); 

003 if((winwidth/16*9) 
<winheight) { 

004 $("#bottom img"). 
css({height:winheight 
}); 

005 } else { 

006 $("#bottom img"). 
css({width:winwidth}); 
007 } 


te 


Rotate your #bottom 2 

The code we just added sets the image so that it 
will always fill the browser window, but we still need to 
set the rotation of the <div>. We can do this now that 
we know the width and height of the window. We’ll look 
at what this code does in a minute, but for the 
time being just add these two lines immediately 
beneath the code you added in step 14: 

001 $("#container").css({height:winheight}); 
002 $("#bottom").css({webkitTransform: 
”rotateX(-90deg) translateZ(- 
”+(winheight/2)+"px) translateY("+(winheight/2) 
+"px)",height:winheight}) 


008 -webkit-transition: Is linear all; 


009 

-webkit-transform: rotateX(0deg) 

translateZ(0px); 

010 } 

011 

#bottom { 


012 

position: 

relative; 

013 

width: 

100%; 

014 

height: 

600px; 

015 

margin: 

auto; 

016 

overflow: 

hidden; 

017 

text-align 

i: center; 

018 

> 



How it works 

As we’re constructing a box, as well as rotating 
the bottom face <div>, we also need to offset it by the 
height of the front of the box. Additionally, we need to 
set the height of the face and move it forwards in Z 
space towards the camera by half the depth of the box. 
If this doesn’t make sense, imagine how you would 
position faces of a cube when making a paper model. 

Check in your browser 

We’ve got two sides of a cube set up correctly 
now, but before we introduce the final element, let’s 




make sure it renders in the browser as we’d expect. 
When you load the page now, you shouldn’t be able to 
see any sign of the #bottom <div>. If all is as it should be, 
you’ll simply be able to see the #container <div> along 
with its textured background. 


, Trigger the animation 

When we click on the current thumbnail image, 
the animation should be triggered so that the cube 
rotates up, hiding the front of the box and revealing the 
cube’s base. The result will be a full-window view of the 
image that we’ve clicked on. Add the code below to set 
a new rotation value for the box. 


001 $(".thumbnails").click(function(){ 

002 $("#rotate").css({webkitTransform:"s 
cale3d(l, 1, 1) rotateX(90deg) translateY(- 
”+(winheight)+"px)"}); 

003 }); 


Put it to the test 


" Test again in your WebKit-based browser, and 
this time, when you click on the thumbnail, you should 
see the full-window version animate into view. Why 
does it animate rather than flick straight into view? 
Because we added the -webkit-transition value in step 
12! If you want to alter the speed of the animation, try 
adjusting the value Is to 0.5s or 1.5s to speed it up or 
slow it down, respectively. 


Allow the user to return 


" You’ll have noticed that once you’ve clicked on a 
thumbnail, you’re stuck in the full-window view. We can 
solve that by adding one last bit of code to remove the 
box rotation when the #bottom image is clicked. Add 
this jQuery code to put the fix in place: 


001 $("#bottom img").click(function(){ 

002 $("#rotate").css({webkitTransform:"scale 
3d(l, 1, 1) rotateX(0deg) translateZ(0px)"»; 
003 }); 


. L Fully test 

We’ve now got a fully functioning image gallery 
that enables us to move between different thumbnail 
images and click on each to reveal a full-page version 
using a very slick 3D cube animation. The whole thing 
is rendered using only CSS3, with just a smattering of 
JavaScript to set up the events to trigger the animation. 
Test it fully in your WebKit browser to make sure that it 
all works as it should. 


Improve usability 

While it’s obvious to us as the designers of this 
user interaction what we need to do to trigger the 
animation, for the average visitor it won’t be quite so 
apparent. Consider adding some icons or text-based 
instructions to give the user some guidance on how to 
view the full-window version. It’s also worth considering 
adding a fallback for non-WebKit-based browsers. 
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Design and build an image slider header: part 2 


Design and 
build an 
image slider 
header: part 2 

Take your Photoshop design and get 
it in motion using HTML5 and a jQuery 
plug-in that promises the WOW factor 

tools I tecli I trends Photoshop, Dreamweaver, WOW Slider plug-in 
expert Neil Pearce 


Ps 

Dw 

l<& 

HTML 

5 





n the last issue we dived into Photoshop 
and revealed how to create a clean 
header element and image slider. Our 

objective was, once designed, to build the 
header using HTML5 and CSS3 before 
working some magic with the WOW Slider 
jQuery plug-in on the image lightbox. 

As we said in the first instalment, there 
are many good reasons for having a 
well-built image slider, especially if you are 
a creative who wants to showcase your work. 
jQuery carousel plug-ins are very popular these 
days and can be found on many websites. As 
there are so many to choose from, it makes 
sense to try as many as you can and regularly 
update the one on your site to keep things fresh. 

If you didn’t follow along with part 1, then fear 
not - you can just use the design supplied on 
this month’s cover disc. You will need to find 
your own stock images and we will be using 
Dreamweaver as our editor - however, you are 
free to use whatever editor you are most 
comfortable with. For a look at the slider in 
action, head to www.neilrpearce.co.uk/build. 




Slider 


About Blog Works Contact 



<4\iiti<:loc:lcwise 

frointop> 

• Showing the initial, 
intermediate states of the 
slider with shifting panel 
transition effect that 
shuffles and alternates 
the two example images 


IMAGEOf 
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Design and build an image slider header: part 2 


Setting the background 

The first thing we need to do is open up the 
design in Photoshop that we created in part 1 (or 
alternatively just grab the file from the CD). Hide all 
layers except the background, the topbar and the slider 
stripes layers. Then, using the Rectangular Marquee 
tool, make a selection from the top down at about 115px 
wide. Go to Edit>Copy Merged and save it as ‘bg.jpg’ 
inside a folder called ‘images’. 


Select the logo 

Now make a selection around the logo but 
hide the background layer so that it has a transparent 
background and save that as a PNG file. By doing it this 
way, if we ever want to use a different background 
colour or texture, we can easily, without it affecting the 
logo. Also save this inside the images folder. 


Slider background 
and overstate 


Here we make a selection around the overstate on our 
navigation and save that as we did in the previous step. 
Next, locate the green slider background layer and 
Cmd/Ctrl-click on that layer to make the whole thing an 
active selection. Edit>Copy Merged that and, once 
again, save it within your images folder. 




</\bove> 

• Capturing our drop shadow 
with the Rectangular Marquee 
tool ready to save it out as a PNG 

• Here we use the section tag to 
control the width of the page 


The header tag can be used [anywhere] 
but it makes sense to use it at the top of the 
page where it makes the most impact 


Slider shadow 

Again this is pretty straightforward and, by 
making sure the background layer is hidden and using 
the Rectangular Marquee tool, we can make a selection 
around our slider’s drop shadow and save that as a 
PNG. Now that should be all we need in order to start 
building our header and slider. 

HTML5 Doctype 

Launch Dreamweaver (or your preferred text 
editor) and create a new file; either open a new HTML5 
file or manually type in the HTML5 Doctype. Then 
create a link to the styles.css file (which we will create in 
a minute) inside the head tag and save it as ‘index.html’. 

001 <!DOCTYPE HTML> 

002 <html> 

003 <head> 

004 <meta http-equiv="Content-Type" 
content="text/html; charset=utf-8"> 

005 

006 <title>W0W slider</title> 

007 

008 <link rel=''stylesheet" href=''styles.css"> 
009 

010 </head> 

011 

012 <body> 

013 

014 

015 </body> 

016 </html> 

017 


Wrap it up 

Let’s make a wrapper so we can control the 
width of our page. Instead of using the boring old div 
tag, let’s use section and give it an ID of wrapper. That 
way our wrapper has more meaning than normal and 
this generally helps support the semantics of the page. 

001 <body> 

002 

003 <section id="wrapper"> 

004 

005 

006 </section> 

007 

008 

009 </body> 

010 </html> 

Header tag 

Now we’re going to use our second HTML5 tag: 
the header tag. The header tag can be used more than 
once throughout your document but it makes sense to 


use it at the top of the page where it will make the most 
impact when a visitor first arrives. Inside that we can 
include an empty div with an ID called logo so that we 
can target the logo using our CSS; this will help to keep 
the page nice and light. 

001 <header> 

002 

003 <div id="logo"x/div> 

004 

005 </header> 

Nail the navigation 

Now inside our header tag we can use the 
HTML5 nav tag and then, as usual, include an 
unordered list for our navigation buttons. Here we are 
looking to target whatever page we are on; make use 
of a class called current to implement this. 

001 <nav> 

002 

003 <ul> 
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Design and build an image slider header: part 2 


004 

005 

<li class=”current”><a 

href=" 

”>Home</aX/li> 



006 

<lixa 

href=" 

”>About</ax/li> 

007 

clixa 

href=" 

">Blog</aX/li> 

008 

<lixa 

href=" 

">Works</ax/li> 

009 

<lixa 

href=" 

">Contact</aX/li> 

010 

011 

</ul> 



012 

013 

</nav> 




Slider section 


Now underneath our header tag, let’s add in a 
section tag called slider_wrap that we will use to place 
the whole slider in. Create a div with an ID of slider_bg; 
this will be used for the green background of our slider. 
Lastly we will add in a div with an ID of shadow that will 
serve as our slider’s drop shadow. 


001 <section id=”slider_wrap"> 


002 

003 

004 

005 

006 

007 

008 

009 


<div id="slider_bg"> 


<div id="shadow"x/div> 


</div><!— END slider bg —> 


010 </section><!— END slider — > 


WOW slider wrapper 

Just before we jump over to the CSS, let’s 
include a div with an ID of wow_slider inside the 
slider_bg tag. This is going to be used for our images 
because they will be slightly bigger than our green 
background; this will also contain our generated HTML, 
which you will see later in the tutorial. 


001 <div id="slider_bg"><!— Green bg —> 

002 

003 <div id=”wow_slider”x!— images —> 

004 

005 </div> 

006 

007 </div> 


Create the CSS 


Start a new CSS file, call it ‘styles.css’ and then 
open that up in your text editor. Next we are going to 
add in our background image within the body rule as 
well as set up the page wrapper. Apply the logo and 
float that to the left with a little bit of margining to 
position it to best effect. 


001 body { 

002 

003 background: #e7e7e6 url(’images/bg_wrap. 
jpg’) repeat-x; 

004 font-family: Verdana, Geneva, sans-serif; 



lop lobolloin> 

• Adding in the navigation styles 
and setting the hover and 
current states in the backend 

• How the page is looking up 
front with the navigation and 
slider styles applied 



005 font-size: 12px; 
006 } 

007 

008 #wrapper { 

009 

010 width: 1000px; 
011 margin: 0 auto; 
012 } 

013 

014 #logo { 

015 



<2\bove> 

• Once the generated code has been placed in the 
index.html page, move this inside the #wow_slider div 


016 background: url(’images/logo.png’) no- 


repeat; 

017 height: 39px; 

018 

width: 311px; 

019 

float: left; 

020 

margin: 52px 0 0 18px; 

021 ; 

} 


Navigation styles 

Now it’s time to apply a bit of styling to our 
navigation menu. First we float it right and move it 
slightly down. Then we make sure that the li elements 
are floated left and have a width and height. We can 
space them out a little by adding some margining and 
padding. Next we need to ensure our anchor elements 
have the text aligned to the centre before, lastly, adding 
in both our current and hover states. 

001 nav { 

002 

003 float: right; 


004 

margin-top: 50px; 

005 

} 

006 

007 

nav li { 

008 


009 

list-style: none; 

010 

font-size: 15px; 

011 

font-family: 'Century Gothic'; 

012 

float: left; 

013 

width: 80px; 
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014 

height: 35px; 

015 

margin-left: 10px; 

016 

padding-right: 10px; 

017 

} 

018 

nav li a { 

019 

020 

text-decoration: none; 

021 

color: #333; 

022 

display: block; 

023 

width: 80px; 

024 

height: 30px 

025 

text-align: center; 

026 

027 

} 

028 


029 

nav li a:hover, nav li.current a{ 

030 

031 

background: url(’images/overstate.png’) 

no-repeat; 

032 

display: block; 

033 

color: #72aa47; 

034 

} 


Slider styles 

Here we have floated our slider to the left and 
then moved it down by 50px. We give it a height of 
428px, which will be slightly more than our slider 
images but you can modify this value to taste. We can 
position the green background within that using the 
#slider_bg ID. Now it’s just a case of using margin 
values to position it wherever you want. 


001 

#slider_wrap { 

002 

003 

float: left; 

004 

height: 428px; 

005 

margin-top: 50px; 

006 

} 

007 


008 

#slider_bg { 

009 

010 

background: url(’images/slider_green_ 

bg.jpg’) no-repeat; 

011 

width: 960px; 

012 

height: 367px; 

013 

margin: 20px 20px 0px 20px; 

014 

float: left; 

015 

} 


Slider images and shadow 

The reason we created the #wow_slider ID will 
become clear shortly, but ultimately it’s going to be 
used to contain our images for when we install WOW 
Slider. Beneath that we can position our drop shadow 
PNG from step 4 and, by giving this a negative top 
margin, we can pull it up underneath the slider slightly 
so it sits where you’d expect to find a shadow. 

001 #wow_slider { 

002 


003 

width: 935px; 

004 

height: 388px; 

005 

margin: -10px 10px; 

006 

} 

007 

008 

#shadow { 

009 

010 

background: url('images/shadow.png’) no- 

repeat; 

011 

width: 952px; 

012 

height: 96px; 

013 

float: left; 

014 

margin: -10px 0 0 20px; 

015 

} 


Download WOW 

Now head over to http://wowslider.com and 

download the WOW Slider plug-in. Once it’s installed, 
double-click on the shortcut (which should be on your 
desktop) to open up the gallery options. Here you need 
to click on the green ‘plus’ button that’s positioned next 
to the Publish button to source the images you want to 
use. For simplicity we’re working with just two, but feel 
free to include more if you’d like a greater variety. 

Setting the images 

Next, let’s set the dimensions for our images. 
Click on the ‘spanner’ icon to the left of the Publish 
button and then click ‘images’. In the Parameters 
section drop-down menu, inside the Image size option, 
pick Custom size and set this to 935 x 388px. You can 
also choose from a wide selection of transition effects 


here as well as various templates, but in this example 
we have left it with the default settings. 

Prepare to publish 

Click on the Publish button and you will be taken 
to the Publishing Methods page. Here you need to click 
on Insert to page and then hit the Browse button to 
locate your index.html page. Once opened, click on the 
last div that is shown in the page structure section then 
hit Insert before and you’re done. 

Generated HTML and CSS3 

Once you hit Publish, WOW will automatically 
generate all the HTML, CSS and JavaScript files that 
you need and place them all nicely within your index, 
html page as well as in folders within your directory. 
However you will need to move the main WOW HTML 
body inside the #wow_slider div. Lastly open up the 
generated style.css file, locate the #wowslider-container1 
and add a CSS3 box-shadow to create that side shadow 
effect as a finishing touch. 

001 #wowslider-containerl { 

002 /* overflow: hidden; */ 

003 zoom: 1; 

004 position: relative; 

005 width:935px; 

006 height:388px; 

007 margin:0 auto; 

008 z-index:100; 

009 box-shadow: -lpx 3px 10px #000; 

010 } 
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Design your own isometric: pixel-based backgrounds 


Design your 
own isometric 
oixel-based 
backgrounds 

Discover how to make a repeating 
vector pattern and really bring It to life 

tools I tecli I trends Printer, scanner, layout pad, Photoshop 
expert Chris Mai bon 


mjj 

jjj 



dmittedly, pixel art can 
take a fair while if you 
want to do a proper job - 
and it takes even longer 
when being designed for 
a repeating isometric 
pattern. However, for the 
most part, the results 
speak for themselves and 
this tutorial will show you 
how to create a cool-looking background without 
spending too many hours slaving away. 

The idea behind this particular pattern was about 
bringing together a selection of objects that appeal to 
us, from cool skulls, trainers, sweets and hotdogs, to 
ice-cream, pens and pencils, and much more. 

You really don’t have to be Michelangelo to pull this 
off - the only real drawing to be done is some rough 
scamps for guides at the start. The trick here is making 
it personal, filling your pattern with your own likes - or 
indeed dislikes. Bear in mind your site content and be 
prepared that this background could steal the show! 





Isometric 

grid 


Isometric grids are a 
great way to achieve a 
3D/2D look and a very 
useful tool for drawing in 
perspective. This grid is 
made up of a series of 
vertical lines, with lines at 
60 degrees to either side, 
all meeting at common 
points to form a web of 
equilateral triangles. 




Print and 
source 


To save you a bit of time, 
so you can focus on the 
more creative part, we 
have supplied the grid on 
the disc; print this out. The 
background we have 
created is very bespoke 
and tailored, full of stuff 
that we like. So fire up 
your search engine and 
source a few of your own 
favourite things! Work 
from printouts or your 
screen - whatever suits. 
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Design your own isometric: pixel-based backgrounds 


Those little scamps! 

Next grab the printed-out grid and use it as a 
guide to scamp, or sketch. Of course, these don’t have 
to be works of art - they’re just a guide. So long as you 
get the basic isometric angles working correctly, the 
aesthetic can be sorted at a later point. Once you’re 
happy with your lot, scan and save your drawings at 
150dpi, then open them up in Photoshop. 




04 Pixel power 


We have opted to design our 
background in a pixel style. The golden 
rule when designing in pixels is to keep it 
consistent, with pixels one up and two 
across (this ratio), and also to avoid anti¬ 
aliasing. Think clean, simple and bold. 



Let’s start 
drawing! 


Select one of your 
objects to draw. For this 
example we are going to 
start with the skull. Create a 
new layer, select a Ipx pencil, 
zoom in and begin tracing 
over your scamp; remember 
to stick to the one up and 
two across ratio (where you 
can). Zoom out occasionally 
to 100% to see how it’s 
looking, or select Window> 
Arrange>New Window to 
see a live preview. 



Build a library 

It will take a bit of time to get your 
objects looking right, but once you have 
got into your stride you will soon have 
collated a library of items. Remember, it’s 
not about drawing an endless number of 
objects - you can duplicate a lot of them 
and just change the colour and/or little 



Filling your objects should be easy if you kept 
your lines clean and bold; just select the area you 
want to colour using your Magic Wand tool and then 
switch to the Paint Bucket tool to fill. Make sure that your Wand 


Mix it up! 

Be different; use 
gradients and a few soft 
brushes to give your 
objects varying tone 
and lift - flat colour is 
the norm, and looks 
great, but to create 
something that stands 
out experiment with 
colour and fills 


Pattern fills 


_ Create a pattern 1 


Create a new document. It should be 
small; the image you are creating will 
duplicate itself to form your pattern at a 
later stage. So in our case we are using an 
8 x 8px canvas. Zoom in and create a small 
pattern like the one shown above. 


bits of detail here and there to give each properties are set to Tolerance 0, that the Anti-Alias box is unchecked 
one its own identity. for a clean selection, and that Contiguous is ticked. 


Setting the tone 

™ Our objects are very big and bold, which is great, 
but it’s nice to add some little details, such as dials on 
the ghetto blaster or hundreds and thousands on the 
ice-cream and so on. The devil is in the details, as they 
say, so create some nice drop shadows - simple circles 
using a darker shade of your background tone. 


Play with scale 

Not everything has to be to scale - eg our 
ghetto blaster is the same size as our hot dog; it makes 
the illustration a lot more interesting! Aim to be surreal 
and abstract. Use a vibrant colour scheme and play 
with your colour palettes too; it’s being designed for 
screen so you don’t have the CMYK restraints of print. 





Let’s define it as a pattern so it can be used 
at any time. Select Edit>Define Pattern. 
Give it a memorable name and click OK. 



03 _Showcase the pattern 


To try out the custom pattern, select a part 
of the object, then go to Edit>Fill. In the Fill 
dialog, select Pattern from the dropdown, 
find the pattern you’ve just created in 
Custom Pattern and hit OK to apply it. 
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Design your own isometric: pixel-based backgrounds 


10 Layout 

Once you have drawn 
and coloured all your items, 
create a new document (A4 
size, 150dpi), then start dragging 
over your objects and naming 
your layers as you do so. This 
just makes things easier to find 
when composing your final 
layout. Play with the dynamic 
scale; overlap some objects, 
throwing shadows over others 
- anything to help gel the 
picture. Make sure everything 
stays within the page, ie don’t 
have anything overhanging. 



Tiling time 

Now to start 


creating your tile. When 
you have a picture that 
you’re happy with, flatten 
the entire image in the 
layer’s properties, grab a 
couple of guides - ie 
horizontal and vertical - 
and find the centre of the 
image. Now slice the 
image into two from top 
to bottom. Move the left 
half to the far-right of the 
document, and the right 
half to the far-left. 




Slice twice 


Now slice the image into two again, from left to 
right this time. Put the bottom half up against the top of 
the document, and move the top half down to the base. 
You have now created four seamless joins and you 
should have a space left in the middle. 



When converting your image to 72dpi 
make sure that you have the Scale 
Styles, Constrain Proportions and 
Resample Image boxes in the Image 
Size dialog all ticked, and in the 
bottom dropdown Bicubic Sharper 
selected. These settings just help to 
retain the sharpness when scaling 
down, avoiding any blurs and keeping 
that clean pixel look we’re after. 



15 ...and repeat! 


Once happy with your finished 
tile, flatten the document, Select All and 
copy the image. Create a new A4 
document at 300dpi to keep the 
sharpness (don’t worry, it will be scaled 
to 72dpi later on). Paste your copied 
images into this new document. 


Different tiles 

We haven’t done it for this tutorial but to create 
an even more random pattern, create a few different 
tiles, move some objects around and change some 
colour - but only the editable objects in the middle. 
Once satisfied save them out as new versions. Instead 
of using just the one tile to repeat you now have a mix. 


Filling the gaps 

It’s important to keep these elements within the 
page and not to overlap or go off the page or it will 
compromise the repeat pattern. Grab your elements 
and fill in the centre; this can be tricky as the 
background is now flat so it’ll take a little creativity and 
patience to fill in the spaces, but you’ll get there. 
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Design your own isometric: pixel-based backgrounds 


Compile the tiles 

The tiles will be a lot smaller due to the high-res image dpi. Now 
duplicate the layer a few times, make sure that View>Snap is ticked, 
and start placing the tiles: top and bottom, left and right. They should 
automatically fall flush with each edge - notice how it all repeats 
smoothly and, bit by bit, transforms into a very striking image. 



Displacement theory 

To really add some variation it’s a good idea to 
take some of the objects and turn them so they no 
longer sit along an isometric angle. Don’t overdo it, as 
we still want the emphasis on the grid - just a few 
scatterings to lift the picture with a few small objects; for 
example, we have used our french fries and cake. 




7T“< 

1 vaheIIk 1 fi*** «ai-, 

Zi It 

H Hectic W2 1* 1 J 

: ; 

(7 ••• It 

Ilk DbtU'ni'K 

83 f __ t , ^ 

Igl wdi* 7i m 1! -i 

Jl Br'fltit: [Ml? <ni Tj ^ 

11 Vi+Mifla: Iri 1: mwiumdi il* 




18 Resize for web 


The scale is really down to you. 
We prefer the scaled-down pixel look, 
hence creating small tiles to give it that 
visual impact, but maybe mixing up the 
scale could be a cool direction to go. 
Once you’re happy, flatten the image, go 
to lmage>lmage Size and convert to 
72dpi (see the ‘Stay sharp’ boxout). 


Adjustment levels 

The last few steps are just a few different 
suggestions on how to treat your image. All the hard 
work is done and the great thing about this illustration is 
that, apart from a few small areas, the design is made 
up of flat colour, so colour editing is super-easy. First, 
how about stripping it back, creating a greyscale 
version (lmage>Desaturate)? Or you can use lmage> 
Adjustments>Brightness/Contrast to get a bolder look. 




Channel 

Mixer 


Still not happy with 
your colours? Use lmage> 
Adjustments>Channel 
Mixer to remove/replace 
tones. It’s a great tool to 
experiment with. We 
guarantee you will settle on 
a palette you would never 
have imagined at the start. 



Ready to glow? 

r So there you have it, a repeatable pixel isometric 
pattern based on everything you love - you can’t get 
more bespoke than that! The pattern can be used in any 
shape, on any format. As a final touch, add some soft 
glows with a brush set to Screen to give it a neon look. 
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Create a web-ready 3D logo with SketchUp 


Create a 
web-ready 
3D logo with 
SketchUp 

Google SketchUp is the ideal software 
for making the move from 2D to 3D 

tools I tecli I fronds Google SketchUp (free or Pro), SketchUp 
RoundCorner plug-in export Robin de Jongh 




ith the adoption of 
HTML5, the web will 
become 3D enabled as 
standard. The dawn of 
universal fully interactive 
3D graphics, virtual 
environments and games 
without plug-ins isn’t far 
away from a mainstream 
reality. But as a web 

designer comfortable with 2D tools, that third dimension 
might seem a little daunting. This is a simple tutorial to 
introduce you to the notion of working in three 
dimensions - and what subject matter could be more 
fitting than the open-source HTML5 logo itself? 

Here we use Google SketchUp to create a simple but 
effective web-ready 3D asset. SketchUp excels at 
creating such models because it encourages you to 
model from a 2D image as a starting point. This eases 
you from a 2D mindset into 3D without the hassle of 
learning a whole new way of thinking. So the first step, if 
you don’t already have it, is to download SketchUp! 


HTML 



This eases you from a 
2D mindset into 3D without 
having to learn a whole 
new way of thinking 



Setting up with SketchUp 

After you have installed Google SketchUp, fire it up and select 
Choose Template from the welcome screen. Now select the Product 
Design & Woodworking - Millimeters template, as shown above, and 
click Start using SketchUp. To fetch the image you’ll be working from, 
navigate to www.w3.org/html/logo and download the open-source 
HTML5 logo, saving it into a convenient folder to grab in the next step. 
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Create a web-ready 3D logo with SketchUp 



Import the image 

You now need to import the 2D logo image into 
SketchUp as a reference to work from. Go to File>lmport 
and select the folder where you just saved the HTML5 
image. Select All Supported Image Types from the 
drop-down menu and make sure that the Use as Image 
radio button is checked before opening it. 



Placing and sizing 

Your image appears in the 3D viewport. Move 
your cursor to the Origin and left-click to fix the 
bottom-left of the image in that location. Move the 
cursor to the right and watch the image stretch in size. 
The width of the image is shown in the bottom-right of 
your window; type in 500 and hit Enter. 


HTML 



Using preset views 

Go to View>Toolbars>Views. Now drag the Views 
toolbar to dock it where you want - either at the top or 
to one side of the window. Click on the Top view button, 
then click the Zoom Extents option. You now have the 
whole image filling the screen, viewing it head on. 





i ***** 

HTML 



Draw a rectangle 

Select the Rectangle tool and click first on the 
top-left of the HTML5 shield; you should see the tooltip 
On Face in Image. Now move the cursor to the 
bottom-right until you see the tooltip On Edge in Image. 
Move to the right until you have the shield fully 
enclosed and then click to create the rectangle. 



L 


Extrude into 3D 

Hold the middle mouse button and move the 
mouse to orbit the view so that you’re looking at the 
rectangle end-on. Use Pan or Zoom Extents to frame 
the view. Select Push/Pull and click on the shape. Move 
the mouse upwards to extrude the rectangle into a box 
- around 30 millimetres should do it. 





Draw cut lines 

Select the Pencil tool and move the cursor over 
the top edge of the box. When you get near the middle, 
the tooltip should show Midpoint. Click there, and then 
click at the centre of the left side edge as indicated 
above. Click on the first point again and draw a line to 
the centre of the right-hand edge. 


Create the bevel 

Select the Push/Pull tool and click on the top-left 
section of the face that you just created. Push the face 
all the way to the back of the box and click; the Push/ 
Pull-ed face should disappear. Repeat this process for 
the right-hand side. Once done, the top face of the 
shield should be bevelled, as it is in the image above. 




SketchUp Pro’s 
Boolean Tools 



Modelling is much quicker if you have 
SketchUp Pro, because you can use the 
new Solid Tools. In Pro, from step 13, go to 
View>Toolbars>Solid Tools. 



02 _The Intersect tool 

Select the shield outline shape and turn it 
into a group. Now select both the shield 
and outline shape. Click on the Intersect 
tool and it’s all done for you in one go! 



Now turn the ‘5’ into a group. Select the 
digit and the shield together. Activate the 
Union tool; you now have a finished shield 
and can go straight to step 17. 
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| Create a web-ready 3D logo with SketchUp 



Opening up Pandora’s 
box with third-party 
plug-ins 


SketchUp initially came with just two 
or three tools, and the reason it gained 
such rapid popularity was largely 
because of that simplicity. To stay true 
to that unique selling point, SketchUp 
still ships bare bones compared to 
other software, but importantly you 
can use plug-ins to provide pretty 
much whatever extras you need. 

Plug-ins come in ZIP files and are 
usually found on forums or 
third-party sites - for example, http:// 
sketchucation.com. Once you have 
the ZIP, extract it to your plug-ins 
folder. When you restart SketchUp 
there should be an extra toolbar or 
menu items in the Ctrl/right-click 
(context-sensitive) menu or Tools 
menu. Some tools need to be enabled 
in Window>Preferences>Extensions. 



Construct the 3D text 


Go back to the Top view and use the Pencil tool 
to trace the edge of the 'IT. Make sure that the tooltip 
always shows On Face in Image or On Edge in Image. 
Use Push/Pull to extrude the letter. Repeat this for the 
other characters, but instead of extruding, just 
double-click on the face with the Push/Pull tool. 



High five! 

Orbit the view until you can see under the shield. 
Trace the outline of the shape starting at the corners, 
then go to Window>Outliner and select the HTML5_ 
shield component. Ctrl/right-click and select Hide 
before going to the Top view. Trace over the white ‘5’ as 
you have done before and Push/Pull it a long way up. 



Intersect two volumes 

Triple-click the ‘5’, Ctrl/right-click and select 
Intersect Faces>With Model. Now Push/Pull the 
shield shape up and clear of the ‘5’. Orbit the view and 
Push/Pull the bottom face of the shield shape down. 
Double-click the HTML5_shield component to edit it. 
Triple-click and go to Intersect Faces>With Model. 



Erase excess geometry 

Ctrl/right-click the HTML5_shield component and 
select Explode; this makes the HTML5_shield geometry 
stick to the shield shape and the ‘5’ that you created. 
Select the Eraser tool and rub away the bottom-left and 
bottom-right parts of the shield that you don’t need. 
Make sure all lines and faces are removed. 





Manipulate 
the 3D view 


Rotate the scroll wheel to zoom, 
or press and hold to orbit. Keep 
a finger over the Shift key and 
hold it to pan instead of orbit. 



Creating components 

Press the Spacebar to deselect all tools, then 
triple-click on the shield. Ctrl/right-click and select Make 
Component. Type in ‘HTML5_shield’ into the Name field, 
ensure the ‘Replace selection with component’ box is 
ticked and hit Create. Now repeat with the text, but this 
time hold Shift to allow you to select multiple letters at 
once; name this component ‘HTML5_text’. 



12 Cookie cutter 


Ctrl/right-click the image and select Delete. Now 
rotate the view and Push/Pull the bottom face of the ‘5’ 
up a tiny bit. Now draw a single line to finish off the 
shield shape as shown. Unhide the HTML5_shield 
component using the Outliner. Lastly Push/Pull the 
upper face of the ‘5’ so that it is just clear of the shield. 



that you don’t need; this leaves just the intersected form 
of the HTML5_shield component and the shield shape 
extrusion - or, in other words, the finished shield. Now 
select the underside of the shape and hit the Delete key 
(or Backspace if using a Mac). 
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Create a web-ready 3D logo with SketchUp 



see that part of the ‘5’ is still left within the interior of the 
shield. This excess geometry will make your file size 
larger than it needs to be so should be removed. Use 
the Eraser on this until you only have the indentation of 
the number in the shield (see the screenshot). 



Download some 
SketchUp extensions 

Use the Pencil tool to draw a line along one edge of the 
underside of the shield; this will reinstate the back face. 
Now open your browser and go to http://tinyurl.com/ 
sketchuproundcorner. Download the latest versions of 
RoundCorner (currently RoundCorner 2.3a) and 
Libfredo (currently Libfredo6 4.3b) and extract them 
into your Google SketchUp plug-ins folder. 



Select sharp edges 


Save your file and restart SketchUp; now you 
will see an additional toolbar. Hit the Sharp Corners 
button, click in the menu bar under Offset and a dialog 
box opens. Enter 12mm in the Offset box and 3 in the 
Number of segments box, then press OK. Now select 
the six outer edges of the shield’s upper face. 



Help 
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In the round 

Move the cursor into a blank area of the screen 
and you will see a green tick - left-click this to confirm 
and the corners are now rounded off. Click on the top 
face of the ‘5’. Reduce the Offset to 2mm, hit OK and 
click to confirm. Repeat this step with each of the letters. 





A splash of colour 

r Select the Paint Bucket tool and open the Colors 
folder in the Materials palette. Sticking with the original 
scheme, find an orange colour and apply it to the shield. 
Select white to paint the ‘5’ and a grey/black colour for 
the ‘HTML’. Go to Edit>Select All then use the Move tool 
to shift the tip of the shield to the Origin point. 



Go to File>Export>3D Model, select COLLADA file, then Export. You 
can now use SceneJS (http://scenejs.org) with the COLLADA importer to 
serve the model in WebGL-enabled browsers. For more on creating 3D 
models for web/games, see this book: Google SketchUp for Game Design. 


Keep your 
geometry 
separate 

In SketchUp all geometry 
you create will stick to 
other geometry. So when 
you have an item you 
wish to keep separate, 
always turn it into a 
group or component. 
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Get your site seen, or suggest a theme 

Tweet us with the URL or topic % @WebDesignerMag 

INFOGRAPHICS 

Infographics and data visualisation can make 
even the dullest subject interesting. Here we pick 
24 top-quality examples of the art form 
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Email us & webdesigner@imagine-publishing.co.uk 
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4 . http://bit.ly/Tmaxw 

5. http://bit.ly/shBg4e 
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22 . http://bit.ly/pQRgDH 
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17 . http://bit.ly/unySKV 
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Need an inspirational site dissected?Q webdesigner@imagine-publishing.co.uk 


web workshop 


Get the vintage 
illustration look 

inspiration www.ryanscherf.net 



Bringing 
vintage bang 
up to date 


Scherfs graphic work is a style that gives 
maximum impact but is not too difficult to 
achieve. There is a distinct nod to the 



Sometimes we don’t need whizzy 
features on our websites - we just need 
the finer points of a good, honest piece 
of design. This works excellently for 
Scherf as it shows off his ability to 
control creative software, not 
only through the making of 
great graphics, but also 
through the precise 
implementation of CSS 
to produce a well- 
rounded, tactile site. 


Tiling 101 

Due to improved broadband 
speeds, graphical backgrounds can be 
much larger than in the past. However 
it’s vital that they tile seamlessly so 
that, regardless of the visitor’s screen 
size, the continuity is not broken. One 
way to do this is to have a graphical 
element leave one side and then rejoin 
on the other, so it matches when tiled. 


vintage style and, once you settle on a 
particular theme, it becomes very easy to 
replicate across the design. Here Scherf has 
enhanced the illustration by using some 
old-fashioned paper textures to give it a 
unique look. By blending the clouds and 
the stars into the design, it all begins to 
look cohesive as if it belongs together. 
The design is rounded off by the use 
of typography overlaid across the 
image, which also acts as a word 
count for the site. 


here are many reasons 
why people are drawn to a 
website. Sometimes it’s a 
great whizzy feature, the 
utilisation of cutting-edge 
technology or a layout that’s 
a bit more clever than the 
norm. But for Ryan Scherfs 
personal portfolio site, he uses good 
clean HTML5 that’s wrapped up in a 
brilliant design that incorporates 
illustration and typography beautifully. 
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DESIGNING 7 DEVELOPING 


INTERFACE! 


Back to top 

At any point you can 
return to the top of the 
document with this 
illustrated arrow button 
in the bottom-left. 


Navigation 

A simple navigation bar 
sits in the top-left of the 
site. The titles of the 
buttons appear on 
rollover and the 
navigation remains in 
place as the page scrolls. 


Typography 

The bold typography is 
used to tell the visitor 
exactly what Ryan’s skills 
are. This is of utmost 
importance when 
freelancing as the viewer 
needs to quickly see your 
specialist skill areaCs). 


Vintage- 

The illustrated design 
work is brought together 
by using aged paper 
textures to give the site 
an old-fashioned feel. 
Notice how all the design 
elements use these 
textures for consistency. 


Subtle 

background 

The remainder of the 
website uses a subtle 
backdrop texture 
which retains the 
illustrated paper 
theme throughout. 
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Get the vintage illustration look 



<comment> 

What inspired 
the designer to 
make the site 


Textures you can touch 

“For the background of my personal portfolio website, I was really aiming 
for a style that was truly unigue. I wanted visitors to feel as if they could 
reach out and touch the textures - plus I wanted the work to speak for 
itself. By juxtaposing bright designs with subtle earthy tones, I ensured 
that my portfolio of work seems larger than life.” 

Ryan Scherf, www.ryanscherf.net 



Capture the illustrated look 



Gradient backdrop 

Choose a light yellow colour 
for the background and a dark blue 
for the foreground colour. Switch to 
the Gradient tool and drag from top 
to bottom on your document while 
holding Shift to add a gradient. 


Burn some paper 

If you search for ‘paper 
textures’ online you will find many 
results. Once you have one or two 
you like, drag them into your 
composition and change the 
blending mode to Color Burn. 


Pen tool 

Switch to the Pen tool and 
draw triangles along the bottom of 
the image to give the impression of 
mountains. Make sure that the path 
is joined to the beginning point so 
we can fill it with colour next. 



Fill selection 

In the Paths panel, click on 
the Selection icon to pick the path. 
Fill the mountains on a new layer 
with any colour; this will be covered 
up by the paper texture in step 5. 


Add paper texture 

With a different paper texture 
add this as a new layer to the piece, 
above the mountains. Hold Opt/Alt 
and click between the layers to use 
the lower shape as a mask. 


Head in the clouds 

Apply a cloud brush or stock 
imagery. Add several clouds and 
vary their direction using Edit> 
Transform>Flip Horizontal. Mix up 
the size with Edit>Transform>Scale. 



Soften edges 

Add a layer mask then use a 
soft brush (at 20% Opacity) on the 
cloud edges. Set the layer Opacity 
to 80% so that the background 
texture is able to show through. 


A star is born 

On a new layer, with a hard 
brush, add a yellow dot (Transparency 
10%). Duplicate the layer and scale it 
up (Transparency 20%). Repeat and 
set the final layer to 80% transparent. 



Duplicate the star 

Put the three star layers in a 
folder, copy and place around the 
scene. Resize some of the stars for 
more variation. You should now have 
roughly the same scene as the site. 


Creative titling 
for your site 

Scherfs site tells users exactly what his skills 
are as the visitor hits the site - something 
which is particularly important if you are a 
freelancer. Here we explore how to re-create 
his typographic style in Photoshop. 



Lay out your text 

In Photoshop grab the Text tool and 
use black as the foreground colour. Place 
each word of text on a separate layer so that 
you can resize the words and arrange them 
in a suitable way to show off the name of 
your site and your skills. 



Open Layer Styles 

Double-click on one of the text layers 
in the Layers panel to open the Layer Styles 
menu and set the fill Opacity to 75%. Click 
on Bevel and Emboss and add an Outer 
Bevel setting at just 1 pixel. Turn off the 
Shadow Opacity and the Global Light 
options and move the angle as shown. 



Add Inner Shadow 

03 Click on the Inner Shadow option 


and give it a Distance and Size of 1. 
Then leave all other settings as default 
before hitting OK. Ctrl/right-click the layer 
and copy the layer style, then Ctrl/right-click 
the other layers and paste in the style. 
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Cutting-edge web logo trends 

inspiration www.kommunikat.pl 



’x * 


<comment> 

Where to go for 
inspiration and 
to stay on trend 



he scope for exciting web logos has 
widened due to the improved capabilities 
of modern design software. Adobe 
Illustrator and Photoshop can be used 
individually, or in unison, to great effect. 
Photoshop’s own Pen tool, combined with 
Smart Object rescaling and layer styles 
make for a super-powerful arsenal. 

Logo design is always in huge demand, being an 
essential component of any brand identity - none 
more so than those that saturate the web. Therefore, 
it’s never been so important for designers to produce 
memorable logos, supplying the demand that all web 
businesses are clamouring for: to stand out. 

“I think Photoshop gives the opportunity to explore 
spatial dimensions of logos,” explains logo designer 
Jakub Rutkowski. “Try to work with 3D effects or build 
up texture, find a new way to brush your shapes and 
play with light and shadows.” Here we present a few of 
these styles, showing how to re-create some of the 
coolest current trends in a few easy steps. 

Essential resources 

“Inspiration and reference is the first and 
most important phase in the creative 
process. I start my journey at LogoLounge 

(www.logolounge.com) where I compose 
an ideas board. To set a benchmark I look to 
Behance, www.movingbrands.com, http:// 
heydays.no, www.effektivedesign.co.uk 

and my guru, Muggie Ramadani.” 

Jakub Rutkowski, www.kommunikat.pl 


Technique 

Dusting surface texture 





Prep work 

This effect works best with a 
clean bold logo. First apply a Chrome 
Gradient Overlay layer style (8% Opacity). 
We’ve duplicated the layer, erased the 
layer style, dropped layer Opacity to 50% 
and applied a slight Texture>Grain filter. 


Digital dandruff 

Find a paint splat or distressed 
paper texture then resize and position 
over your logo. Apply strong Curves 
(Cmd/Ctrl+M) values for high exposure, 
set a Screen blend mode, invert (Cmd/ 
Ctrl+I) and apply a clipping or layer mask. 


Designer dandruff 

The style indicated by 1 is 
commonly referred to as 
‘dandruff’ in the creative 
community. It replicates a 
pre-washed look and this 
airspray effect is always popular. 




admatik 
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1 

Washed out 

i 

Gradients 

i 

Fancy font 

A distressed look can add 

Gradients display well in an 

Bring a bit of class to 

some tangibility to your 

on-screen format, bringing a simple 

your logo with the 

logo. A hand-crafted style 

yet attractive diversity to your style. 

typeface. Flourishes 

can also be charming and 

Subtlety is the key to capturing the 

add some personality, 

create a strong personal 

eye of a consumer without 

making the brand 

identity in negative space. 

distracting from the product. 

instantly recognisable. 
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Cutting-edge web logo trends 


■Technique 

Let the type 
do the talking 


Elegant lettering is a current trend in the 
logo field that both excites consumers 
and adds a touch of class to a client’s 
identity. Decorative or professional font 
types can be extremely advantageous 
when it comes to promoting both 
cultured or more mainstream brands. 
Photoshop’s Pen and scaling tools, plus 
layer styles, work in unison to help you 
produce glossy, calligraphic type in a 
matter of minutes - here’s how. 



Begin by selecting a font with a 
fluid free-hand style with curvy edges 
and loops - something with lots of flair. 
We’ve plumped for the Loki Cola font, 
free from www.dafont.com. Type out 
your logo large scale in Photoshop. 



Smart selections 

Convert your type layer to a 
Smart Object. Cmd/Ctrl-click this layer’s 
thumbnail, create a new layer and then 
Select>Modify>Contract by 26px. Press 
Cmd/Ctrl+F5 and fill with white; use these 
new white shapes as a blueprint. 



Gloss and shadow 

Perfect your gloss with the Pen 
Shape tool and Transform>Warp option. 
Apply an Inner Shadow with a dark red 
colour to your main type; set blend 
mode to Multiply, 68% Opacity, Distance 
8px, Choke 4px and Size 38px. 




Technique 

Gradients and quadrangles 



01 Draw a quadrangle 


Select the Rounded Rectangle tool in Photoshop and then set 
Radius to 25px (in the overhead options bar). Draw out your shape (in 
b7b7b7 grey) before activating the Move tool and the Show Transform 
Controls option. Holding the Cmd key, click and move corner control 
points to form your quadrangle. With the shape finished, select 
Gradient Overlay from the Layer Style (fx) options. 



Gradients and layer styles 

Set your gradient style in the Gradient Editor. Choose from 
presets in the default menus or, if you prefer, make your own with the 
stop colour control points. Select your type (eg Gill Sans) and apply 
your logo in white. Again in the fx options select Drop Shadow, 
applying it at 30% Opacity, lOpx Distance and 30px Size. Add an Inner 
Shadow at 45% Opacity, lOpx Distance and 12px Size and you’re done. 


SI logo lounge 
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INSPIRATION 

LogoLounge and more 

The web is jam-packed with resources to inspire and help 
produce your web logos. Just typing in ‘50 top logo 
designs’ will have you trailing through a host of Google 
links and websites, however we thought it best to supply 
some of the best resources around to get you started so 
you can get down to business straight away. 


Join the gang 

LogoLounge (www. 
logolounge.com) is not just 
a reference site but also an 
inspirational community. It 
accepts admission to its 
creative fraternity for a yearly 
subscription of $100. For this, 
you can share your designs 
with fans and industry experts 
alike, as well as earn yourself 
a chance of publication in 
one of the organisation’s 
celebrated books. 


Firstly, as recommended by Rutkowski, log on to www. 
logolounge.com. This site optimises efficient ways to 
reference the latest logo trends and materials and its 
extensive database is home to over 170,000 examples. 

Looking for other great places to advise you on the logo 
creation process? You are guaranteed to take something 
away from both www.smashingmagazine.com and http:// 
psd.tutsplus.com. Here you’ll find professional and creative 
approaches, all tailored to Illustrator and Photoshop 
production. Just run your logo search and you’ll be 
presented with loads of step-by-step tutorials; these are 
pitched to all levels, from beginner to advanced. 

Once you have the style and the technique down, what 
about the type? Fonts are essential to logo production, and 
seeing as they are graphics, not script, the world is your 
typographic oyster. Of course, you might be inspired to 
create your own, but if you want a quick fix then grab 
yourself some royalty-free examples at www.dafont.com 
and www.google.com/webfonts. Just be sure to check the 
usage conditions to avoid any future copyright disputes. 


Tech tip 

Watch your 
weight 

The term ‘weight’ in logo 
design addresses form 
and colour. A slim logo 
can be easily lost among 
other page elements; a 
thicker type (form) can 
resolve this. Your logo 
should also be easily 
recognisable when 
coupled with a 
secondary feature, such 
as diverse angling or cut¬ 
out elements. The use of 
colour is an integral 
attention grabber, so 
make sure not to mix 
too many gradients or 
complex patterns as 
they can be disruptive. 
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Fixed headers and 
web fonts explored 

inspiration www.kitchensinkstudios.com 



he right mix of web 
typography and HTML5 
backgrounds can produce 
an imaginative and 
standards-friendly web 
presence, as seen in the 
Kitchen Sink Studios site. 
Typography is the key 
component and great use is made of a 
simple combo of typefaces, which are 
given extended mileage with clever 
use of colour, style size and positioning. 


The two font families forming a 
formidable partnership here are 
Bodoni and Brandon Grotesgue. While 
they are the focal point, the background 
textures, images and colour palette 
all shout retro yet refined. On a 
more functional level the 
single-page design uses a 
fixed header element, 
combined with a 
smooth scrolling script 
for the navigation. 


Colour 

co-ordination 

Getting the right colour palette is 
critical to creating a website that 
conveys the right message, works with 
its surroundings and is easy to view. 
Two tools to help you with this are 
Adobe Kuler (http://kuler.adobe.com) 
and Color Scheme Designer (http:// 
colorschemedesigner.com). 


Resource 

Smooth scrolling 
with Easing 

Activating a link in the navigation menu 
sees the site deploy a smooth scrolling 
action down to the chosen section. This 
effect is all thanks to jQuery. 

To use this the jQuery library needs to 
be referenced and either linked to or 
placed on the server. The obvious place 
to get this is http://jquery.com or you 
can use a web-based library as per 
Google - take a look here: http://code. 
google.com/apis/libraries/devguide. 
html#jquery for more info. To 
create the scrolling effect the 
Easing plug-in is used. A great 
example and guide can be found 
at http://bit.ly/bD57s4. 


| ST UUIOIvi' INC. | COMPANY [ WOHK HIStOHY | VtNVli 


INDUSTRY 


Kitchen Sink Studios * i 

A.K.A THE SIXK 

A CREATIVE CONSULTANCY 


SINCE 

1999 


EIGHT-TWO-EIGHT 

NORTH THIRD STREET 


KXX PHOENIXmARIZONA 


K itchen sink studios® incorporated 

ii a ci tMhvt? and dyi.igii r_onsulLonr_y bdiu-J 

in Phoenix, Arizona. The firm is owned and 
npprntpd by Nficnln'i HowprnnH Kory Knpfpr. 

Uui ][]}] is Iti tnll your slniy mi iEihihusI c :t] rn r mh 11 1 r iy 


When you have the fight took to tell your story* 
you get great results. We take pride in helping our 
clients glow* lEmve and piuspei. And we erijoy llie 
relationships we build along the way. 

We are o truly collaborative team, both when we 


Text rollovers 

The navigation menu uses a 
rollover effect to accentuate the 
fact that a specific link has been 
selected. Choosing another link 
will see the former one revert 
back to the standard colour. 


Web fonts 

Fonts and typography are an art form 
in themselves and Kitchen Sink makes 
extensive use of web fonts to create 
its page style. Imaginative use of 
styling, size and colour help to 
produce a clear and concise result. 


' Fixed navigation 

The navigation menu 
positioned at the top 
of the page is fixed 
into position with 
the content scrolling 
behind. This ensures 
that access to the key 
sections is always 
readily available. 


Site showcase 
(not shown) 

An image slider is 
employed to display 
the agency’s portfolio 
of work. This reveals 
the latest collection of 
projects and adds a 
clever twist when an 
image is selected 
allowing a visitor to 
view a slideshow 
specific to a project. 


Textured backdrop 

Background images are used in abundance 
here to help create the frame for the site 
and add texture to the main canvas. In 
addition, background images are used to 
create header and footer elements with 
individual elements populated with text. 
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Fixed headers and web fonts explored 



<comment> 

What was 
the inspiration 
behind the site? 


Retro design, contemporary code 

“The Kitchen Sink Studios site’s retro-inspired design uses HTML5, CSS3 
and jQuery coding to allow for strong SEO and the ability to view it on all 
kinds of devices while preserving the design. Highly optimised CSS, 
streamlined navigation and heavy use of web fonts were just a few of 
the many approaches that went into the website.” 

Doug Bell, creative director, www.kitchensinkstudios.com 



Technique Fixed navigation 


Introducing the Nav tag 

Typically, the navigation menu of a site is kept 
inside its own specific div tag or, if it’s HTML5-friendly, it 
will reside inside the nav tag, as seen here. Whichever 
tag is being used, it needs to be placed in a fixed 
position in order to remain a constant element. 

Add some padding... 

W Fixing the navigational tag will mean that the 
next div tag - say, for example, #maincontent (line 1) 

- will be effectively placed behind the nav tag; this 
means it will hide any content at the top of the tag. To 
accommodate this side-effect, you can apply a little 
padding (line 4) - approximately the same size as the 

001 

<nav> 

nav height - to the top of the #maincontent tag. 

002 

<ul> 

003 

<li>HOME</li> 

001 #maincontent { 

004 

<li>COMPANY</li> 

002 height: 500px; 

005 

<li>WORK</li> 

p03 width: 980px; 

006 

</ul> 

|04 padding-top: 50px;} 

007 

</nav> 


Fix the div tag position 

W Fixing the position of a div tag is an incredibly 
straightforward task - in fact, the only thing that it 
requires is the application of the position tag. Add the 
following code - position: fixed; - to the nav, or relevant 
tag, as shown below (line 4) and save. The tag will now 
be locked into its position, which will enable the page 

content to scroll under the menu. 

...or float the margins 

W An alternative solution to the padding option 
considered in step 3 is to add a margin (line 4) instead, 
but this on its own can cause the fixed header to adopt 
the margin and move the header down the page. To 
compensate for this, the tag can be floated to the left 
(line 5), which will move the header back to the top of 
the page where it belongs. 



001 #maincontent { 

001 

nav{ 

002 height: 500px; 

002 

height: 35px; 

003 width: 980px; 

003 

width: 1000px; 

004 margin-top: 50px; 

004 

position: fixed;} 

005 float: left;} 



Inspiration Borrow from the past 



There is no doubt that the design inspiration for the 
Kitchen Sink Studios website has gone back in time and 
borrowed a number of elements and ideas from the 
past. This gives it a fascinating old-fashioned feel, from 
the imagery to the graphical elements to the aged 
paper texture seen throughout. 

But the element that probably most stands out in 
terms of its retro roots is the typography. The site 
makes extensive use of the Bodoni font which is 
cleverly partnered with Brandon Grotesque. To 
generate the sheer variety of type seen on the Kitchen 
Sink site a selection of weights, styles and colours have 
been used. The fonts are well complemented by the 
aged backgrounds and textures that surround them. 



Technique 

The@font-face 

generator 


The web font revolution has seen an influx 
of new typefaces. Font Squirrel provides its 
own examples and code to get you started. 



01 Find favourite fonts 


There are a number of ways to use 
@font-face, but this is one of the best. First 
obtain fonts from sources like MyFonts 

(www.myfonts.com) or FontSquirrel (www. 
fontsquirrel.com). Now head to www. 
fontsquirrel.com/fontface/generator 





i 

i 


02 Generate code 


Click Add Fonts and select the ones 
you want from your system. If using for web 
alone be aware of the different formats. Click 
the Agreement checkbox to activate the 
Download Your Kit button; this will provide a 
ZIP file with the necessary code and fonts. 



03 On to the web 


Add the font to the same location as 
the HTML file being used; add all variations 
for greater compatibility. Now use the CSS 
file or add the @font-face code to a style 
sheet already being used. Finally, you need 
to add the appropriate code to a tag, ie: hi 
{font: bold 50px ChunkFiveRoman;}. 
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Dedicated to the code-heavy 
side of modem online design 


x > Begin coding 
y/ applications,, 
with Ruby 

Build a simple blog application P 

using RoR’s powerful MVC 
framework and generators. Page 82 


.NEW 

iz'S?Se 
section 


An in-depth 
introduction 
to JSON: part 1 


Take formative steps with JavaScript 
Object Notation. Page 86 


Enter the 

WebMatrix 


The blue pill or the red pill? Journey into Microsoft’s WebMatrix 
development tools and discover its key features. Page 78 
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Into the 


WebMatrix 


Microsoft’s suite is more than just 
another web toolset. We take a closer 
look at the revamped platform and 
see if it can remedy our developer ills.. 


M icrosoft’s WebMatrix web-development tools have a much 

longer history than most people initially realise. It’s a history 
that takes in much of Microsoft’s web-development story - from 
the early days of .NET to today’s much more advanced ASP.NET 
MVC platform, along with the growing range of tools and features 
that you find built in to the company’s Web Platform Installer. 

Way, way back, in the early days of its .NET programming model, Microsoft 
put out a proof-of-concept application to show just what could be done using its 
new programming tools and, at the same time, give developers something that 
would help them work with some of its latest web-programming features. That 
software was the original 2003 Web Matrix, a simple editor for building ASP.NET 
dynamic websites, along with a new local web server that would only launch 
when you were testing pages and sites - greatly saving on system resources. 








You can use WebMatrix’s site view to launch and run 
sites, ready for testing and analysis. Options include 
setting the default page types, the URL on the local 
server and whether or not a site uses PHP 


WebMatrix has a minimalist start screen, where you 
can edit existing sites, install web applications for 
customisation, create a new site from a template or 
transform a folder on your PC into a website 


WebMatrix reloaded 

2003’s Web Matrix was only available for two 
years and a couple of versions before being 
replaced by Visual Studio Express Web Developer. 
But the idea behind that simple tool didn’t go 
away (much like the tool, which remained an 
essential part of the toolkit for any Microsoft- 
focused web developer using Windows), and in 
2010 Web Matrix returned - only this time without 
a space, and now called WebMatrix as part of 
Microsoft’s growing toolset for working with free 
and open-source web applications. The new 
WebMatrix isn’t one tool but a mix of several 
tools, technologies and services, including a new 
embedded database for Microsoft’s Internet 
Information Server web server, a local web server, 
the ASP.NET Razor framework and a feature for 
guickly editing and customising sites and pages, 
with simple deployment options for both 
Windows and Linux web servers. There’s even a 
set of SEO tools to help push your websites up 
the search engine rankings. 

You can install and update WebMatrix from the 
Web Platform Installer, itself an important part of 
Microsoft’s web-development strategy. Windows 
only, it’s a small download, clocking in at just over 
7MB (though you’ll need to download the .NET 
Framework if it’s not already installed). Once 
installed you can use it to build sites with 
Microsoft’s online Web Gallery, using a design 
template or by simply turning an existing folder 
into a website. The Web Gallery is more than just 
a set of online templates though; it’s a catalogue 
of tools and platforms that you can guickly 
modify and deploy. Applications in this gallery 
include blog platforms like WordPress, or CMSes 
like Orchard and Umbraco, with a mix of ASP and 
PHP code. Applications can be installed locally 


before being customised and then uploaded to 
servers - and, of course, there’s always the option 
to build your own site from scratch. 

There’s a lot more to WebMatrix than ASP 
NET development. 

Microsoft has 
given it support for 
PHP as well, so you 
can use it to build 
applications for 
just about any 
web platform. The 
IIS Express server, 
which is bundled, 
provides the PHP 
support, so you 
can test applications on a Windows PC before 
uploading them to a Linux server running 
Apache. Applications are deployed using FTP or 


the Web Deploy protocol. FTP will work for most 
sites and servers; Web Deploy is currently only 
supported by IIS running on Windows servers 
and needs to be installed on a server before it 
can be used. Once 
set up you can 
package sites for 
guick deployment 
or alternatively use 
synchronisation 
tools to ensure sites 
are deployed across 
an entire web farm. 
Web Deploy is also 
able to handle 
packaging and 
deploying databases, simplifying the path from 
development to production. If you don’t have a 
host for a site, then click a link in WebMatrix and 
you’re taken straight to a site listing Microsoft’s 
web-hosting partners, where you can guickly 
sign up and have a place to deploy your code. 

Journey into the Oracle 

WebMatrix’s library of sites makes it simple to get 
started with tools like WordPress. It makes 
installation easy, downloading and configuring 
any additional components needed by the 
application you’re using, like MySQL. You’re 
prompted to accept any licences, and then the 
application you want to use is downloaded and 
installed, ready to customise and use. A local 
copy of IIS Express is ready to run the site if you 
need to do any browser-based configuration. It’s 
a good idea to read the application 
documentation before you install it, as 
WebMatrix’s simplicity means it’s easy to make a 
misstep; of course, it’s just as easy to delete a site 
folder and start over from scratch. 

One of the more interesting features of 
WebMatrix is its reporting tools. You can guickly 


Spotlight Products Applications 
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09/11/2010 
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Visual Studio 2010 SP1 

10/03/2011 

Add 


Microsoft SQL Server DataTools r Database Projects 

16/12/2011 

Add 

Jl 

J?., 

Windows Azure SDK far Node.js - December 2011 

20/12/2011 

Add 


Getting started 

To install WebMatrix 
download Microsoft’s 
ever-useful Web 
Platform Installer, 
pick WebMatrix and 
click Add. It’s ready 
to go in seconds 


II The new WebMatrix 
isn’t one tool but a 
mix of several tools, 
technologies and 
services IMP 
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Blue pill or red pill? Into the WebMatrix 



WebMatrix editor 

The WebMatrix IDE makes it easy to edit code. Pick a file, open it then add your HTML and 
inline code. Here we’re adding a Twitter search to a page, along with a layout template 


run a series of reports on a site, getting details of 
site performance (helping you to tune dynamic 
pages), as well as SEO reports that help you to 
tailor content to search engines. Reports like 
these are an essential element for solo web 
designers/developers, as they’re a great aid to 
managing and fixing sites, and also provide you 
with the tools that make it easier to support 
clients. Reports can be exported as CSV for 
analysis in Excel or another spreadsheet, where 
you can turn them into charts for clients. You can 
guickly get hints on what needs to be done to fix 
a page, and an ‘Edit this page’ option takes you 
right to where you need to edit the HTML. 

This Razor is C# 

There are two schools of thought when it comes 
to building dynamic web applications. One option 
is to add markup into a page, which when 
interpreted by a server replaces code with 
dynamic content. It’s an approach familiar to 
anyone using PHP or ColdFusion - or who used 
to use Microsoft’s original VBScript-powered 



Active Server Pages. The other approach 
separates code and design, keeping them in 
distinct files and allowing designers and 
developers to work on the same page in different 
tools. Code-behind files, as Microsoft calls them 
in ASP.NET, work well most of the time, especially 
on complex, code-heavy sites. 

However, the ASP.NET code-behind approach 
isn’t suitable for all situations. Sometimes you just 
want to drop in a line or two of logic that improves 
a page, without the overhead of two files, each 
with their own window in your development IDE. 
That’s where working with PHP and similar tools 
has the advantage, simplifying adding dynamic 
content and data connections to just one page. 
With Microsoft delivering PHP to its own servers, 
it makes sense for it to deliver something similar 
to ASP.NET users. That something is Razor, an 
alternate syntax for ASP.NET applications that 
comes as part of WebMatrix. Code runs on the 
server, so all that the browser has to handle is 
HTML. You’re not limited to WebMatrix when 
working with Razor either, as it’s supported in 
Visual Studio as well. 

While Razor is similar in style 
and concept to the original ASP 
syntax there’s one big 
difference: instead of using 
VBScript or JScript (Microsoft’s 
original implementation of 
JavaScript), it uses C# and 
Visual Basic.NET. Adding code 
to a Razor HTML page is easy, 
using the familiar symbol to 
show where your code is, 
whether it’s a single statement. 


WebMatrix package download 

Log in to IIS Express’s control panel and you 
can download helpers, templates and 
add-ons for WebMatrix, enriching your 
applications with new capabilities 




people only did it once, sites like 
'what I texted last night 1 would fade 
away (also 'there, I fixed if) 

2 minuses sgp ■ reply ■ reiweet ■ fav&iite 


Just one of life's 

little lessons. We ail do it once,. And 
only once. 

26 minutes ago ■ reply 1 istvreet ■ favorite 


P There is. It's the 

first one, and we've been there too! 

35 minutes ago ■ reply ■ leaweet ■ favorite 

You'd think after 

4*, living there tor nearly three years, 
I'd have more recommendations. Is 
there a Microsoft Store in 
Scottsdale? 



Twitter helper 

Using WebMatrix helpers like this Twitter 
tool, you can add what would normally be 
guite complex HTML and code with just 
one straightforward line of Razor 


an inline expression or a complete block of code 
taking several lines. Code blocks are reaped in 
braces - much like writing a standard C# 
application - and use familiar .NET programming 
concepts and technigues. Pages have a new file 
extension: CSHTML for pages written using C# 
and VBHTML for pages that use Visual Basic. 
There’s also no need to terminate Razor 
statements (unlike ASP, which used <% %> to 
wrap code), even when they’re inline in a page, as 
the Razor parser is smart enough to understand 
just where C# or VB code ends. It’s even clever 
enough to handle the difference between an 
email address and a section of code. 

It’s easy enough to step from traditional ASP. 
NET programming to Razor when you want to 
guickly code up a prototype site, and you can use 
the usual design tools and technigues to give 
your website the look and feel you want. It’s even 
possible to extract the code from a Razor page 
and use it as part of a full-blown ASP.NET 
application (and vice versa). 

One of the biggest advantages of the Razor 
syntax is its ability to HTML-encode your text 
independently. If you’re using HTML-reserved 
characters like < and >, the Razor interpreter will 
automatically replace them with the appropriate 
escape seguences so that they’re displayed 
correctly in the browser. It will also handle HTML 
code that is embedded in multi-line code blocks, 
as long as you make sure that it’s correctly nested 
inside the code block. 
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IIS in bullet time 

One of the most important parts of WebMatrix is 
IIS Express, a lightweight version of Microsoft’s 
Internet Information Server. Having a full server 
on your desktop is a key tool for testing pages 
and sites, especially when there are options for 
monitoring real-time reguests built right in to the 
WebMatrix platform. An included set of web- 
based admin tools enable you to download extra 
packages too; Microsoft has a large library of 
templates and helpers that can be added in to a 
site, ready for use in your current pages. 


Web Gallery 

The gallery built in to WebMatrix gives you a 
way of installing and configuring many of 
the open-source web tools you can find in 
the Web Platform Installer. Just click and go! 


Shaving Razor layouts 

Razor lets you build page templates, which can 
simplify the process of giving a site a running 
look and feel. All you need to do is construct a 
layout page with common design elements and 
content, which is called from every page that 
uses its design. An 
@RenderBody() 
call in each layout 
page handles 
embedding page 
content. All you 
then need to do is 
set a LayoutPage 
property in each 
page, calling the 
appropriate layout 
for the site or 

section. You can also include section overrides 
that control only the elements of a page displayed 
- for example, dropping the menu or the footer. 
All you need to do is create @RenderSection calls 
which are marked as optional. 


Any requests? 

WebMatrix isn’t just a development tool - it’s 
able to show you just how a site responds 
and works, plus where content is missing or 
unresponsive. It’s all in the Reguests tab 


features to guickly embed dynamic content in a 
page, with a simple API that lets you connect to a 
database and then use SQL gueries to extract 
data. All you then need to do is create a simple 
loop to display data from a guery, ready to format 
just the way you want. The data tools built in to 
the WebMatrix 


Razor lets you 
build page templates, 
which can simplify the 
process of giving a site 
a running look 


editor 

build 

gueries. 


can help 
and test 
ready to 


Data and the Razor 

The web is data-centric and Microsoft has 
included its embedded SQL Server Compact 
database as part of WebMatrix. There’s no need 
to install large-scale databases (though there’s 
full support for standards-based data sources); all 
you need is the database file and a .NET server. 
As SQL Server Compact has most of the features 
of a larger database, it’s easy enough to migrate 
data when moving from prototype to production 
or when you need to add scale to a site. 
WebMatrix contains tools for both editing data 
and for designing database tables. If you’ve used 
any of Microsoft’s development tools you’ll find 
WebMatrix’s data tools very familiar, with the 
ability to define and view relationships. 

If you’re using ASP.NET Razor to build pages, 
you can take advantage of its data-binding 


use in your code - 
just like in the full 
Visual Studio tools. 

Razor lets you 
create small 

reusable snippets of 
code, called web 
helpers, which can 
be utilised across one or more sites on a single 
server. There’s a library of helpers bundled with 
WebMatrix, and others like tools for working 
with OData sources and a Twitter helper can be 
downloaded from Microsoft’s 
CodePlex service. Helpers are one 
of WebMatrix and Razor’s most 
useful elements, and make it very 
easy to add what could be complex 
features to any website. 


Is WebMatrix ‘the One? 

There’s a lot to be said for a free, easy-to-use set 
of tools for building webpages. Yes, WebMatrix is 
targeted at hosted sites supporting Microsoft 
technologies, but it does also support PHP (even 
if that means you don’t get access to many of the 
nifty Razor features). If you’re a developer 
working alone, then you’ll find the new WebMatrix, 
like the original, an essential part of your day-to- 
day toolkit. It’s small, lightweight and simple to 
work with, offering a single Ul for building and 
testing sites - and you’ve always got a route from 
WebMatrix to the full Visual Studio toolset. 

Razor is another kettle of fish. ASP.NET, 
especially ASP.NET MVC, has grown complex. 
Code-behind works well as a way of delivering 
complex business logic, but it’s overkill for many 
sites. Razor takes ASP.NET back to its roots, but 
without sacrificing the capabilities of the .NET 
platform. Template-based site development and 
web helpers speed up design and development, 
while inline code makes it easy to see just where 
on a page the code you’ve written will run. Razor 
turns out to be a really guick way of building 
prototypes of large sites, or for guickly putting 
together a site that’s not going to need the 
plumbing of a full-blown ASP.NET application. 


Neo?.. No, SEO! 

The reporting tools built in to 
WebMatrix can be used to give an 
SEO overview of a site, using basic 
search engine optimisation rules to 
fine-tune site content to make it more 
visible on the major search engines 









































Begin coding applications with Ruby: part 1 


Begin coding 
applications 
with Ruby 

We set you on the right track to build 
a simple blog application, making the 
most of Ruby on Rails’ powerful MVC 
framework and generators (part 1) 

tools I tecli I fronds Code editor, command line 
export Matt Gifford 



I f you haven’t heard of Ruby on Rails, 
chances are you’ve used a site that’s 
powered by it. Well-known adopters 
of the programming language include 
Twitter and GitHub to name just two. 
It’s an open-source framework that 
makes use of the MVC (model view 
controller) approach to programming 
and is incredibly easy to learn. 

Rails is an object-based language, 
but don’t worry if you haven’t encountered this before. 
Following this guide you’ll be able to create powerful, 
dynamic applications quickly, with minimal fuss. 

In this tutorial we build a very simple blog application 
that will allow users to add, edit and delete entries. We 
look at enforcing data validation, outputting data and 
creating custom routes for users to access pages. We’ll 
also see how easily the tools included in Rails can 
generate code, which helps to streamline your workflow. 

Next month we’ll expand on this example site and 
add login authentication, access control and look at 
how to customise the layout/CSS of the application. 


Installing Rails 

The installation procedure for both Ruby and Rails is fairly 
straightforward. Windows users benefit from Railslnstaller (http://railsinstaller. 
org), which will install everything you need with ease thanks to the package. 
For Mac and Linux users, installation instructions are slightly different 
depending on your platform and operating system, but they are all included 
in this issue’s cover disc to help you get started. 

Create application 

V Once the installation process is complete, open up a terminal or 
command window and navigate to the location of the directory you wish to 
place your Ruby on Rails application. In that directory, use the rails command 
to create a new application called ‘blog’ which will generate and create the 
required directory structure for the new site. 


001 > rails 

new blog 

002 

003 create 

004 create 

README 

005 create 

Rakefile 

006 create 

Gemfile 

007 ... 


Start server 

Included in the generated files is everything you need to start a 
standalone web server for local application development. Let’s start the web 


server now using the command line and view the default holding page. We’ll 
specify the optional name of the server (WEBrick) in the command line to 
ensure it starts and not any other local server you may have installed. 


001 > rails server webrick 


003 => Booting WEBrick 

004 => Rails 3.1.3 application starting in development on 
http:7/0.0.0.0:3000 


005 => Call with -d to detach 
006 => Ctrl-C to shutdown server 


Up and running 

By this point, the command window should have indicated 
the successful startup of the server, now available on Port 3000 
(http://127.0.0.1:3000). Leave this terminal window open to view application 
tracing, and launch a new window to navigate to the same directory location 
into which the application has been written. 

Create a database 

Rails can handle interactions with a number of database types but 
comes packaged with an SQLite3 database that requires no configuration, 
making it ideal for development. Let’s create the database using the rake 
command (a helper tool that greatly simplifies your workflow), which will 
create and place the database within the /db directory. 


001 > rake db:create 


l Well-known adopters of 
this programming language 
include Twitter and GitHub 


Generate the scaffold 

Next, we need to create a database table to store our blog posts. 
Create a rails model for our application to access and communicate with that 
database table, a number of views to add, edit and delete blog posts and a 
controller to handle access to everything. It might sound like a lot of work, but 
Rails lets you do all of this with just one simple command. 
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Begin coding applications with Ruby: part 1 



001 > rails generate scaffold Post title:string content:text 
002 

003 invoke active_record 

004 create db/migrate/20111214105237_create_posts.rb 

005 create app/models/post.rb 

006 ... 

007 

Migrate data 

Included in the generated code, Rails creates a migration file with a 
UTC-based timestamp called ‘20111214105237_create_posts.rb’, or something 
similar. This contains the required code to update and amend the database 
schema and any of its data (if applicable). We need to apply the migration to 
create the table, which we again do using a rake command. 

001 > rake db:migrate 
002 
003 

004 == CreatePosts: migrating 
005 ================= 

006 — create_table(:posts) 

007 -> 0.0015s 

008 == CreatePosts: migrated (0.0016s) 

009 ======================= 

Post admin 

Navigate to http://127.0.0.1:3000/posts in your browser where you 
lean see the auto-generated files and forms to manage blog posts. Rails has 
created the necessary CRUD functions to Create, Read, Update and Delete 


post entries. All of this was generated by the rails generate scaffold command 
in step 6, greatly simplifying the workload required to build the files manually. 

Seeding data 

Copy the contents from the ‘seeds.rb’ file from the disc and paste them 
into the db/seeds.rb file in your Rails application location. This contains code 
to populate the posts table and is a great way to share consistent dummy data 
with team members. To populate the posts table well use that super-useful 
rake command once more to seed the data. 

001 > rake db:seed 

Data validation 

At the moment we can enter completely empty blog posts into the 
database, which we need to prevent. The model layer handles the interaction 
with the database. Let’s add some validation rules to app/models/post.rb to 
ensure that all fields are required and the title is unique and at least ten 
characters long. Open the file and add the following code: 

001 validates :title, :content, presence: true 

002 validates :title, uniqueness: true 

003 validates length of :title, :minimum => 10 

Post display 

The blog admin section is working, so let’s create a controller to handle 
the front-end display for the blog visitor. We’ll use Rails to generate the 
controller for us, specifying the methods (ie index and show) we want it to 
handle. This will generate a new controller available at http://127.0.0.1:3000/ 
home/index via your browser. 
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001 > rails generate controller Home index 
002 show 


12 Define routes 


In this instance, we want the home index page to replace the 
default Rails page, and we can achieve this by editing the config/ 
routes.rb file. First you need to locate the comment relating to the root 
of your site and, once you’ve found it, add the following line of code 
beneath to set the new site root to the freshly created home index. 
Finally, you need to delete the default index page (public/index.html) 
before moving on to the next step. 


001 # You can have the root of your site routed with "root" 
002 # just remember to delete public/index.html. 

003 # root :to => ’welcome#index' 

004 

005 root :to => ’home#index’, as: 'home' 


Match routes 


We also want to create a named route to display a specific post. 
The routes.rb file is highly configurable. In this instance, we want to 
display the home -> show method when a user requests the following 

URL in the browser: http://127.0.0.1:3000/post/{postlD}, and we’ll be 
able to call the URL using the showpost reference. 


001 match ‘post’ => ‘home#index’ 

002 match 'post/:id' => 'home#show', :as => :showpost 


14 Home controller 


We’re nearly done now. Open app/controllers/home_controller. 
rb. Here we need to set what data is available to both the home and 
show views. For the index view we’ll obtain all saved posts and then 
order them by title. For the show view we want to find a specific post 
entry by the ID value sent in the URL. 


001 def index 

002 @posts = Post.order(:title) 

003 respond_to do |format 

004 format.html # index.html.erb 

005 format.json { render :json => @posts } 

006 end 

007 end 

008 

009 def show 

010 @post = Post.find(params[:id]) 

011 end 


Final output 

To wrap up this first instalment of a two-part tutorial, open app/ 
views/home/index.html.erb and paste in the supplied code from the 
cover disc. This will iterate over the returned post entries and then 
display the results, also helpfully generating a link to the specific 
post page. Once this has been returned, add the second code snippet 
to app/views/home/show.index.erb to create the individual post page, 
which will also link back to the home view. 


001 <hl><%= @post.title %></hl> 

002 <%= sanitize(@post.content) %> 

003 <br /> 

004 <%= link to 'Back to Home', home path %> 



Code library 

In detail 

Let’s take a closer look at some of the key 
features available within the Rails environment 


The respond_to block 
manages various format 
calls to this action. If you 
browse to http:// 
localhost:3000/post. 
json, the response will 
be in JSON format. 


001 class HomeController < 

ApplicationController 

002 

003 def index 

004 @posts = Post.order(:title) 

005 respond_to do |format| 

006 format.html # index.html.erb 

007 format.json { render :json 


=> @posts } 


008 

@posts } 

009 end 
010 end 


format.xml { render :xml => 


011 

012 


014 
015 

016 end 


def show 

@post = Post.find(params[:id]) 
end 


The validation rules are 
highly configurable. Here 
we are using a regular 
expression to enforce 
minimum character 
limits and alpha-only 
input. We’re also 
providing our own 
custom message to 
display to the user. 


001 validates :title, 

002 :format => { 

003 :with => / A [a-zA-Z\d\s]{10}*$/, 

004 :message => 'must be at least 10 

characters and alpha only.’ 

005 } 


001 <hl>Latest Posts</hl> 

002 <% @posts.each do |post| %> 

003 <div class="entry"> 

004 <h3><%= link_to post.title, showpost. 
url(:id => post.id) %></h3> 

005 <%= sanitize(post.content) %> 

006 </div> 

007 <% end %> 


We can easily generate a link to any page using the link_to method, which accepts the 
name to display and the URL to point to as parameters. 
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An in-depth 
introduction 
to JSON: parti 

The fundamentals of coding with 
JSON or JavaScript Object Notation in 
our extended two-part walkthrough 

tools I tecli I fronds Text editor (eg Dreamweaver; not Microsoft Word) 
and a web browser exports Eric Freeman, Elisabeth Robson 



W ith JavaScript we 

typically manage, store 
and pass around data via 
objects. However, there 
comes a time when you 
need to use data outside 
of JavaScript either by 
sending (or retrieving) it 
from a web service, or 
perhaps by storing it 

locally in the browser. To do that we need to represent 
our data in a form other than JS objects. Until recently, 
XML has been the preferred format for data exchange. 
Today, however, many developers are opting for 
JavaScript Object Notation (JSON), finding it more 
friendly than XML - plus it’s already supported on many 
popular web services like Twitter and Facebook. 

In this tutorial, you’ll get acquainted with JSON and 
revisit the HTML5 Web Storage API to store and retrieve 
JSON using JS code. In the next issue, we’ll continue by 
combining JSON with Twitter to show you how to 
interact with web services straight from JavaScript code. 


What is JSON? 

The first thing to know is that JSON is just a literal representation of a 
JavaScript object in the form of a string. What does that mean? Well, take an 
everyday JavaScript object, such as: 

001 var dog = {}; 

002 dog.name = "fido"; 

003 dog.weight = 28; 


That’s just a simple dog object with two properties, right? You probably 
already know you can create the same object with a literal expression, like this: 

001 var dog = { name: "fido", weight: 28 }; 


With JSON, we take that literal expression and stuff it into a string: 

001 var jsonDog = ‘ {"name": "fido", "weight": ”28"}’; 

Object to string, automatically 

Of course, JSON wouldn’t be very useful if you had to type in every 
object as a literal expression to create its JSON string representation. Instead 
you can use the JSON API to turn any object into a string in the JSON format. 
In fact, every modern browser ships with a JSON API that contains two 
methods. The first method - stringifyO - converts any JavaScript object into 
its JSON string representation, like this: 

001 jsonDog = JSON.stringify(dog); 

Here, the variable jsonDog will hold the same value as it did in step 1, except 
that, in this case, the stringifyO method has done all the work for you. 

StringifyO and methods don’t mix 

One thing to know about JSON is that it can represent most things in 
your JavaScript objects, but not methods. You can stringify a JavaScript object 


containing methods, but the resulting JSON string won’t contain them. For 
example, add a barkO method to your dog object (line 4): 


001 var dog = { 

002 

name: "fido", 

003 

weight: 28, 

004 

bark: function() { return "Woof!"; } 

005 }; 


Now try to stringify it: 

001 var jsonDog = JSON.stringify(dog); 

You’ll get the same result you did above; that is, a string representation of the 
dog object minus the barkO method. 

Reconstruct a stringified object 

You now know how to create a string representation of an object 
with JSON.stringifyO, but how do you get an object back from a JSON string? 
To do that, you must make use of the other JSON method: parsed The JSON. 
parseO method takes a JSON string and returns a JavaScript object created 
from that string. As an example: 

001 var aNewDog = JSON.parse(jsonDog); 

The object aNewDog is a dog object created from the jsonDog JSON string. 
Note that the object returned is a brand-new object that is a duplicate of the 
original one that you stringified. 

So what’s the big deal? 

Great, so you can convert objects to JSON strings, and JSON strings 
back to objects - so what? Well, once you have objects in JSON form - that is, 
represented as strings - you can then transfer them to or from a web server, 
or store that string locally for later use. 
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Store objects in Web Storage 

Let’s start by using JSON to store objects in the browser and then, in 
next month’s tutorial, we’ll take a look at how to use JSON with web services. 
To store objects locally - ie in the browser - we’ll take advantage of HTML5’s 
new Web Storage API, which, as you’ll see, is very straightforward to use. In 
this example, we’ll write a simple app that just stores notes: you type in a note, 
and the app saves it away for you to retrieve later. 

To get the ball rolling, grab the files ‘notes.html’ and ‘notes.css’ from the CD 
and place them in a directory of your choosing. Also, in the same directory, 
create a file named ‘notes.js’, where you’ll put all of your code. 

Add a button click handler 

You’ll see in the HTML file a simple form element that enables you to 
enter text for your note (say, for example, ‘Don’t forget to pick up milk’), 
choose a colour for your note, as well as save the note. Let’s start by adding a 
button click handler in the JavaScript file to call a function to create the note 
when you click on the Submit icon (lines 2-3). 

001 window.onload = function() { 

002 var submitButton = document.getElementById("submit"); 

003 submitButton.onclick = createNote; 

004 } 

Get the form values 

You’ve set up a handler function - createNoteO - to call when you hit 
the Submit button; now you need to implement that function. The first step is 
to get each of the values from the form: the text in the textArea control (lines 
2-7) and the colour from the select control (8-11). 


001 function createNoteO { 

002 

var noteText = document .getElementById(''note"); 

003 

text = noteText.value; 

004 

if (text == null || text == "" || text.length == 0) { 

005 

alert("Please enter a note!"); 

006 

return; 

007 

> 

008 

var colorSelect = document.getElementById("color"); 

009 

var index = colorSelect.selectedlndex; 

010 

var color = colorSelect[index].value; 

011 } 


Create the note 

Now let’s add a bit more code to createNoteO so that it actually makes 
a new note. To do that, first add an array to the top of your JS file (line 1): 

001 var notes = []; // creates an empty notes array 

and then add code to generate a note object to the bottom of createNoteO. 
What you’re doing here is first creating an empty object for the note (line 11), 
and then adding two properties: text and colour (lines 12-13). Finally, you’re 
appending the note object to the notes array (line 14). 


001 function createNoteO { 

002 

var noteText = document .getElementById(''note"); 

003 

text = noteText.value; 

004 

if (text == null || text == || text.length == 0) { 

005 

alert("Please enter a note!"); 

006 

return; 

007 

} 

008 

var colorSelect = document.getElementBy!d("color"); 


The JSON API methods 


The JSON API is one of the smallest APIs you’ll encounter, with just two methods: 

stringify(object): This method takes a JS object, an array or a primitive value and converts 
it into a string representation, otherwise known as JavaScript Object Notation (JSON). This 
string notation is lightweight and can easily be used as an exchange format. JSON supports 
all JS datatypes, with the exception of methods and types like undefined that don’t make 
sense outside of JavaScript; it also doesn’t support cyclic data structures. 

parse(string): This method takes a JSON string and returns a new duplicated JavaScript 
object which represents that string. 

There are a few more specialised ways to use this API, many of which you can explore over 
at http://json.org, so, when you get a moment, be sure to check out the site. 

Note that you can examine any object’s JSON representation by using this code: 

001 var json = JSON.stringify(my.object); 

002 alert(json); 


009 

var index = colorSelect.selectedlndex; 

010 

var color = colorSelect[index].value; 

011 

var note = {}; 

012 

note.text = text; 

013 

note.color = color; 

014 

notes.push(note); 

015 } 


Display the notes 

You’ve written the code to store each note in the notes array, but 
wouldn’t it be more useful if you could actually see the notes? First add one 
line to createNoteO to call a new function: addNoteToPageO (line 14): 


001 function createNoteO { 

002 

var noteText = document.getElementById("note"); 

003 

text = noteText.value; 

004 

if (text == null || text == "" || text.length == 0) { 

005 

alert("Please enter a note!"); 

006 

return; 

007 

} 

008 

var colorSelect = document.getElementById("color"); 

009 

var index = colorSelect.selectedlndex; 

010 

var color = colorSelect[index].value; 

011 

var note = {}; 

012 

note.color = color; 

013 

notes.push(note); 

014 

addNoteToPage(note); 

015 } 


The function addNoteToPageO takes the note you just created in createNoteO 
(line 1), gets the notes <ul> element from the HTML page (line 2) and creates a 
new <li> element to hold the text (lines 3-4). We use ‘color’ to set the 
background shade of the <li> element (line 5), and then insert the new <li> 
element into the page. After you’ve typed in this code, you should see notes 
appear in your page whenever one is added (see code over the page). 
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001 function addNoteToPage(note) { 

003 text = noteText.value; 

002 var noteslll = document.getElementById("notes"); 

004 if (text == null || text == "" || text.length == 0) { 

003 var li = document.createElement("li"); 

005 alert("Please enter a note!"); 

004 li.innerHTML = note.text; 

006 return; 

005 li.style.backgroundColor = note.color; 

007 } 

006 if (noteslll.childElementCount > 0) { 

008 var colorSelect = document.getElementById("color"); 

007 noteslll. insertBefore(li, noteslll.firstChild) ; 

009 var index = colorSelect.selectedlndex; 

008 } else { 

010 var color = colorSelect[index].value; 

009 noteslll. appendChild(li) ; 

011 var note = {}; 

010 } 

012 note.text = text; 

011 } 

013 note.color = color; 

Test your notes 

Now it’s time to test. Add a few notes and try some different colours - 

014 notes.push(note) ; 

015 storeNotesO; 

016 addNoteToPage(note) ; 

not bad for a few lines of JavaScript right? Okay, now try this: exit the browser 
and restart it. Reload the notes.html page... and the notes are gone. All that 
hard work down the drain. Let’s fix this with JSON (and local storage). 

Enter the Web Storage API 

To store your notes with this little web app, you first need to make sure 
that your browser supports the Web Storage API (all modern browsers do, so 
if yours doesn’t, just grab a new copy of Safari, Firefox, Chrome, IE9+ or 

Opera). But even if your browser supports Web Storage, you still need to make 
sure your user’s browser does too. So, in the following code, we add a check 
to the bottom of our onload handler (lines 4-6). Notice the object that 
implements the Web Storaae API is named localStoraae’. 

017 } 

Store the notes 

The function storeNotesO files away the notes in the notes array in the 
browser’s local storage. To store (and retrieve) an item from local storage, you 
need a key. So, add one more global variable - key - to the top of your JS file. 

001 var key = "webdesignerNotes" ; 

Then add the storeNotesO function: 

001 function storeNotesO { 

002 // code to store the notes will go here in the next step 

001 window.onload = function() { 

003 } 

002 var submitButton = document.getElementById("submit") ; 

Store the notes 2 

Now let’s write the code for storeNotesO. To use the Web Storage API, 
we use the localStorage object. localStorage has a method - setltemO - that 

003 submitButton.onclick = createNote; 

004 if (! window.localStorage) { 

005 alert("The Web Storage API is not supported."); 

006 } 

takes a key and an item to store. You already created a key to represent your 
notes in the last step. The item you’re going to store must be a string, so we’ll 
convert the array of notes using JSON.stringifyO. Notice that you can stringify 
both individual objects and arrays of objects using JSON.stringifyO. Here’s 
how you convert an array of note objects into a single JSON string: 

007 } 

Set up storeNotes 0 

To store the notes each time you write a new one, add a call to another 

function - storeNotesO - in the createNotesO function (line 15): 

001 function storeNotesO { 

001 function createNote() { 

002 var jsonNotes = JSON.stringify(notes); 

002 var noteText = document.getElementById("note"); 

003 } 
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Store the notes 3 

You have a key and string to store; now you just need to call 
localStorage.setltemO and this will do the rest of the work for you. 


001 function storeNotes() { 

002 

var jsonNotes = JSON.stringify(notes); 

003 

localStorage.setltem(key, jsonNotes); 

004 } 


Test your notes again 

Now each time you add a note it is placed in the array and stored in 
the browser’s local storage. And, in fact, you can take a look at the contents of 
your local storage using the developer tools in your browser. However, if you 
reload the page or restart your browser, you still won’t see those old notes. 


Check for existing notes 

On page load, you want to check if there are existing notes in storage 
to be displayed. Let’s add some code to the unload handler to call another 
function - loadNotesO - which checks to see if there is an item matching the 
key ‘webdesignerNotes’ in localStorage, and loads the notes if there is. 


001 window.onload = functionQ { 

002 

var submitButton = document.getElementById("submit"); 

003 

submitButton.onclick = createNote; 

004 

if (!window.localStorage) { 

005 

alert("The Web Storage API is not supported."); 

006 

} else { 

007 

loadNotes(); 

008 

} 

009 } 


Load the notes 


^ To get an item from localStorage, use the getltemO method, passing in 
the key you used to store the item earlier (step 14). In our case, the key is 
‘webdesignerNotes’ in the global variable key. localStorage.getltem(key) returns 
the string that was stored using that key; we’ll call this string jsonNotes’: 


001 


002 

003 


function loadNotes() { 

var jsonNotes = localStorage.getltem(key); 

} 


Turn the string back into an array 

Remember, jsonNotes contains a string that is the JSON representation 
of your array of note objects, so you need to convert that string back. You can 
use JSON.parseO to do that (line 4). But first check to make sure that jsonNotes 
exists - just in case you’re loading the page for the first time, in which case 
there won’t be anything in localStorage so jsonNotes will be null (line 3). 


001 function loadNotesO { 

002 

var jsonNotes = localStorage.getltem(key); 

003 

if (jsonNotes != null) { 

004 

notes = JSON.parse(jsonNotes); 

005 

} 

006 } 


001 function loadNotesO { 

002 

var jsonNotes = localStorage.getltem(key); 

003 

if (jsonNotes != null) { 

004 

notes = JSON.parse(jsonNotes); 

005 

for (var i = 0; i < notes.length; i++) { 

006 

addNoteToPage(notes[i]); 

007 

} 

008 

} 

009 } 


Code library 

The Web Storage API 

Web Storage is a fairly simple API that you can use to keep data in the 
browser. Data is stored in simple key-value pairs; each item in storage 
has a unique key that is used to store and retrieve it - and each value is 
simply a string of arbitrary length. To use Web Storage, you utilise a 
built-in object - localStorage - which has several methods, including 
two to save and retrieve items. To save an item, use setltemO: 

001 localStorage.setItem("dog name'', "fido"); 


while to retrieve an item, 
use the getltemO method: 


001 var dogName = localStorage.getItem("dog_ 
name"); 


You can also treat 
localStorage like an 
associative array, and 
set and retrieve items 


001 localStorage["dog_name”] = "fido"; 

002 var dogName = localStorage["dog_name"]; 


001 for (var i = 0; i < localStorage.length; 



i++) { 


002 var aKey = localStorage.key(i); 


~* 003 var anltem = localStorage.getltem(aKey); 

To loop through all the 
items that you’ve saved 

004 alert("Item at key ” + aKey + " is: " + 

anltem); 

in localStorage, you can 

005 } 

access each key using 
the localStorage.key() 
method like this: 



001 for (aKey in localStorage) { 


002 var anltem = localStorage.getltem(aKey); 

You can also use for/in: 

003 alert("Item at key " + aKey + " is: " + 


anltem); 

To remove a single item 
from localStorage, all you 
have to apply is the 
removeltemO method: 

004 } 


-001 localStorage.removeItem("dog name"); 


or to remove all items, 
use the clearO method: 

-.001 localStorage.clear(); 


Add the notes to the page 

The last step is to add all the notes from localStorage to the page. For 
this, you can use your existing addNoteToPageO function (step 10; lines 5-7). 
Once you’ve loaded any existing notes into the notes array when the page 
first loads, any new notes will just get appended as normal. 


Each domain gets 5MB (or more, depending on the browser) for data, 
so that means www.webdesignermag.co.uk gets 5MB, yourdomain. 
com gets 5MB and so on. That also means if you’ve got a large website 
with lots of developers it’s a good idea to co-ordinate on things like key 
names and how much data you’re storing with your web app. 
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Blogs from the dark side 

Black is a colour that never goes out of fashion or favour Here we showcase six 











The Old State 

www.theoldstate.com/blog 

Development platform HTML, CSS, JavaScript 

Influenced by its location this Dallas-based agency 
makes great use of vintage fonts to complement the 
simple black-and-white aesthetic. Neat touches such as 
the ribbon in the top-left corner, black-and-white profile 
pics and extra ribbons further add to the ambience. 
Splashes of colour are provided by individual post 
images, but do not distract from the core concept. 


Ectomachine 

www.ectomachine.com/blog 

Development platform Word Press 

Straightforward is a word that suits the Ectomachine 
blog to a tee, but at the same time does not do it 
justice. Black is the predominant colour, with a 
refined and slightly lighter shade of black providing 
contrast with the background. Considered use of 
pink and the subtle use of greys for widgets, borders 
and text create a well-rounded complete picture. 


Brandon Knaster Jewelry 

http://brandonknasterjewelry.com/blog 

Development platform Word Press 

The Brandon Knaster blog is all about being big and bold, 
with the site perfectly matching the content. Taking 
centre stage is a large image set against a dark dynamic 
background that uses a fade effect to reveal even more 
beautifully shot images of Knaster’s designs. We have 
cheated a little as the blog posts revert to a black-on-white 
format, but this is still monochrome content at its best. 
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Blogs from the dark side | 


seen^rsuggest Tweet a 140 with your blog’s address directly to % @webdesignermag 
a theme Email your suggestions to 0 webdesigner@imagine-publishing.co.uk 

examples of gorgeous-looking blogs with a dark and moody canvas 
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AWARE 


logo strays from the typical top J 
corner position to slap bang in the i 
centre. This remains constant 
^throughout for easy access 
to the homepage at 
all times. 


ARE 


f M ■ 


Victorian flock wallpaper and plenty 
of black and grey firmly establish [the 
BlissfullyAware] blog in the list •§ 



The ornate header is a complete 
background image. This includes 
l the texture, name, byline, 

A ornate styling and works A 
k well with this dark 
backdrop. 


GRO 


9UTETI 


E-IB 


fctamt 


NeilNand 

http://neilnand.com.au 

Developmentplatform Flash, Frame CMS 

The varying black and grey tones here ensure the 
viewer is never overpowered by one section, while 
the fixed surroundings allow the visitor to explore 
the one splash of bright colour - the portfolio. Look 
out for the side-scrolling navigation initiated by the 
use of drag and the intriguing final section, where a 
business card and webcam are required... 


BlissfullyAware 

www.blissfullyaware.com 

Development platform Word Press 

Victorian flock wallpaper and plenty of black and grey 
firmly establish this blog in the list. What makes 
BlissfullyAware most interesting is the off-kilter layout. It’s 
effectively a two-column affair but with a few subtle 
twists. The imaginative use of the category listings is 
simple but engaging, while the tabs for redirection and 
video content all add to the fun, quirky experience. 


DavidG 

www.davidg.ro 

Development platform Word Press 

Textures and subtle tones of black and grey are 
brought together by an ornate architectural 
background and a two-column setup. An image 
slider acts as the focal point with a host of colourful 
and creative posts to add interest. The individual 
posts provide a simple but effective layout where the 
full-width images gracefully degrade to thumbnails. 


blog beautiful 


91 





























































Subscriptions Voucher 



YES! I would like to subscribe to Web Designer 

Your details 

Title_First name_ 

Surname_ 

Address_ 


Postcode_Country_ 

Telephone number_ 

Mobile number_ 

Email address_ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

I I UK Direct Debit payment 

I will receive my first three issues for just £1,1 will then pay only £25.15 every six issues thereafter. If, however, I do not 
love what I see, I can cancel at any time. 


CTs] 


PUBLISHING 


Instruction to your Bank or 
Building Society to pay by Direct Debit 

Please fill in the form and send it to: Imagine Publishing Limited, 800 Guillat Avenue, Kent Science Park, Sittingbourne, ME9 8GU 

Name and full postal address of your Bank or Building Society Originator’s Identification Number 


<D 


DIRECT 

Debit 



Payment details 

YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 

□ UK £62.30 (Save 20%) □ Europe £70 □ World £80 


Cheque 

EH I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 


Credit/Debit Card 

EH Visa EH MasterCard EH Amex 
Card number 


EH Maestro 
Expiry date 


Security number EH □ □ 


(last three digits on the strip at the back of the card) 


Issue number EH EH (if Maestro) 


Signed_ 

Date_ 

Code: PCG193 

□ Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 

□ Tick this box if you do not wish to receive promotional material from other companies. 

Terms and conditions apply. We publish 13 issues a year. Your subscription will start from the next available 
issue unless otherwise indicated. Direct Debit-guarantee details available on reguest. This offer expires 
without notice. 

I would like my subscription to start from issue: I_I_I_I_I 

Return this order form to: 

Web Designer Subscriptions Department, 800 Guillat Avenue, 

Kent Science Park, Sittingbourne, ME9 8GU, or email it to 

webdesigner@servicehelpline.co.uk 

Manage your subscription account online atwww.imaginesubs.co.uk 



2WordPr«s£ HTML templates, 

1 H r M i 51 K-.k I li.i: nvr... 501. II •; 
7Q* minxes of ASJ v4tteo tutorials 

www.webdesignermag mu k 


HOWTO 








3 ‘ ; -’ 




WEB OBJECTS 

UseGoogi&SaelcfiUp to 
PKX ar»d export models 


MICROSOFT 


WEBMATRIX 

Leverage great Irate for 
sireartiiinrmj development 


FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
get your first three 
issues for only £1 

Pay only £4.19 for every future issue 
- a 30% saving on the store price 
j:* Free UK delivery to your door 
j: Never miss an issue 
« Money-back guarantee 


*Terms & Conditions 

This offer entitles new UK direct debit subscribers to receive their 
first three issues for £1. After these issues, subscribers will then pay 
£25.15 every six issues. Subscribers can cancel this subscription 
at any time. New subscriptions will start from the next available 
issue. Offer code PCG193 must be quoted to receive this special 
subscription price. Details of the direct debit guarantee are available 
on request. Offer expires 31 May 2012. Imagine Publishing reserves 
the right to limit this type of offer to one per household. 

Source code: PCG193 

Web address: www.imaginesubs.co.uk/wed 
Tel: 0844 848 8413 





































































ISSUES OF 

WEB DESIGNER 

FOR JUST 





©UTMLS fftiiSH ^lOurf'r ® 

♦GOOGLE DART 

StafchplaMliituiltx 

bI JmSciipl . 


ULTRANOIR 


“ POLAROID 

LIGHTBOX 

Bu*l 

L»WIft|Qut*Y4 C5S3 

/ y \ ODOPOD 

•A ImptMUonfl) work Kx 


PICK ^ 
THE PERFECT 


WORDPRESS 

mi prqfesskmalspecial 

■ U U ll/l U c r in i'.vorks, c 'i 

P. IV I ■ ■_ [JlilSlluWtotJKXiSCUWVuViMSi 
AhJX W ^k^kdl designs for your content 



The hottest scK^al-net working APIs and how to integrate them into your site 




Go gle 


+ ■ facebook • 


Get your first 3 issues for 
just £1, then save 30% 
on the shop price 


THREE EASY WAYS TO SUBSCRIBE 


1. Online 

Order via credit or debit card, just visit: 

www.imaginesubs.co.uk/wed 

and enter code PCG193 

2. Telephone 

Order by phone, just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 and quote code PCG193 


3. Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 

















HMTtfoliO 


Championing the talents of 



Ol http://analoquebabv.com 


02 http://iohnkavanaqh.co.uk 


John Kavanagh 

web http://johnkavanagh.co.uk 



Currentrole Front-end developer, director of PixelCounter Ltd 
Education Self-taught 

Expertise Adobe CS, CSS3. HTML5, JavaScript (usually using 
jQuery or MooTools), WordPress, Joomla, Cisco EOS, 
Ul Prototyping, PHP 

Clients Code Computerlove, Periscope Studios, Modern 
English, BBC, London 2012 Olympics, LateRooms 
Twitter @johnkavanagh 


John is an independent front-end web 
developer based in the city-centre of 
Manchester, UK. He started in an animation 
studio in the hills above Manchester doing 3D 
animation/design and TV postproduction. 
When the studio’s clients started asking for 
websites to accompany their advertisement 
campaigns and educational DVDs, it was John 
who found himself taking on the role. 

At the time IE6 was king and front-end 
development was in a phase of transformation 
from archaic table-based layouts and inline- 
styles towards the advanced HTML5 and 
CSS3 technigues around today. This conflict of 
standards and technologies became a 
challenge and he has spent the past eight 
years learning, developing his HTML, CSS and 
JavaScript skills, testing and cursing at IE. 


He finds himself drawn to the hustle and 
bustle of agency life and has - until recently - 
always worked within marketing agencies 
working on big-name and household-brand 
projects. He has developed websites for 
automotive giants like Fiat and Lotus, and 
even undertook several projects paired up 
with Cisco for the London 2012 Olympics. 

Sadly John’s agency career came to an 
abrupt halt shortly before Christmas in 2010 
when the agency he was working for made 
unannounced redundancies. Since then John 
has gone independent and built up a 
reputation of his own, often tackling big 
projects with the help of Lightbulb Creative. 

Away from the computer screen he’s an 
everyday petrol-head, a gualified rally driver 
and, when time allows, a keen traveller. 




Ol 

The UK’s premier tracking and 
recording studio wanted a website 
that differed from their peers', so 
Lightbulb Creative and I gave 
them this FITML5/jQuery creation. 


02 

My personal portfolio site built in 
HTML5, CSS3 and jQuery. The 
overall appearance changes 
through the day based on the 
time and even the local weather! 


03 

The site of the very talented 
digital designer and friend, Mike 
Etheridge. Built from his work in 
HTML5 with jQuery, it has a 
customisable portfolio slideshow. 


04 

A much older piece from the 
portfolio done partially as an 
experiment to see whether it was 
possible to create a slick 
Flash-like Ul with JS and XHTML. 


05 

Media-rich WordPress build in 
HTML5 with slideshows, 
customisable video and audio 
and integration with social 
networks like Facebook. 
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Michele Giorgi 

web www.michelegiorgi.com 


Currentrole Freelance web designer 
Education Self-taught 

Expertise HTML5, CSS3, JS, jQuery, Word Press, PHP, Coda, 
Fireworks, Photoshop, Illustrator, Safari, OS X 
Clients RadioCinema, eScan, Tailorsan, technopia 
Twitter @michelegiorgi 


Michele is a 24-year-old Italian web designer 
who created his first website when he was 
aged just 13. From these early beginnings 
Michele has gone on to develop a strong 
passion for this sector and has made it his 
mission to study the technologies, technigues 
and programming languages needed to 
create contemporary websites. 

Michele is a self-taught web designer and 
has never attended a course on the subject. 
His teacher has been, for the most part, 
Google, along with various colleagues he has 
known at work. Before becoming a freelancer 
he worked for two years at a web agency in 
the Republic of San Marino and for three years 
in a web-marketing and communications 
agency in Rimini, a city in north-east Italy. 

What he loves most of all about his job is the 
ability to unleash his creativity when 


developing web projects. He’s really stubborn, 
so always wants to control every detail to 
ensure perfection. Michele is addicted to 
experimenting with new technigues and 
developing sites with all the latest technology 
including HTML5, CSS3 and jQuery. He’s falling 
in love with Word Press and his faithful travel 
mates are Coda, Fireworks and Safari. 

Michele draws inspiration from everything 
around him: people, places, experiences and 
other websites. From those very same things 
he looks to improve himself and his 
professional style that is evolving day by day. 

Recently Michele published his new 
portfolio (www.michelegiorgi.com) thanks to 
a collaboration with photographer and friend 
Luca Tibberio. This project has recently 
received a lot of web gallery attention and web 
magazine awards, so be sure to check it out. 


01 

Image and creativity are both 
key to Michele’s brand-new 
personal website, developed in 
collaboration with friend and 
photographer Luca Tibberio. 


02 

A work-in-progress for a web 
agency’s startup based on 
creativity and style. The site 
boasts full-screen images that 
resize to fit any screen resolution. 


03 

Developed with Word Press, this 
website focused on street art 
boasts a contemporary grid 
layout and uses a big 
jQuery-powered image slider. 


04 

Also developed with Word Press 
the homepage of this online 
security site uses a clean and 
linear design to help offer 
maximum impact. 


05 

The technopia website is the 
home of an Italian web agency 
where Michele used to work. 
Created with Word Press the site 
adopts a single-page layout. 
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Web talent showcase 



Natalia Robba 

web www.creative-animal.com 



Currentrole Freelance developer and designer 
Education BSc Multimedia Technology 
Expertise XHTML, CSS, Photoshop, ActionScript 3, PHP, PSD to 
HTML conversions. Word Press integrations 
Clients Rock Solid Supplements, The Yellow House, 
Gibraltar, Spanish Stray Dogs London, Natalia 
Robba Photography 
Twitter @creativeanima!1 


Natalia is a web developer and graphic 
designer from sunny Gibraltar, working 
under the moniker Creative Animal. Having 
worked in full-time employment as a developer 
for over five years, it started to dawn on her 
that a full-time job had its downsides - a major 
one being that it could be creatively restrictive. 
As a result, Natalia felt the time was right to go 
down the freelance route, which she did, 
reinvented as Creative Animal. 

From a young age Natalia has enjoyed art 
and sketching; it was only a matter of time 
before she integrated her passion for art with 
the technology that has become ubiguitous in 
this day and age. Being able to combine both 
her creative passions with modern tech 


seemed the perfect match. What she loves the 
most about web design is the endless 
possibilities from client to client, and being 
able to visually represent modern, clean and 
eyecatching designs via online portals. 

It is very important to her that her websites 
be not just functional but as beautiful and 
visually expressive as possible. Natalia spends 
much of her time browsing current web trends 
and checking out fellow designer portfolios for 
inspiration. She says: “It is a fantastic way to 
stay fresh, keep an open mind and deliver a 
good diverse project.” What’s caught her eye 
lately is the abundance of parallax websites 
that are around - in fact, it is one of her next 
projects to test out the method herself. 



Ol 

A website created to showcase 
Natalia’s freelance work. She 
went for a teal blue/fuchsia 
colour scheme and implemented 
a clean, minimalist feel. 


02 

A Gibraltar-based company 
dedicated to providing high-end 
sports products. A green, 
charcoal-grey colour scheme is 
maintained throughout the site. 


03 

A simple logo Natalia created for 
an animal shelter in Spain. The 
pink heart inside the paw print 
symbolises the bond between 
volunteers and rescue dogs. 


04 

A private website for a client 
wishing to sell their property. 
The site was kept pared back 
allowing users to focus on the 
photos and short descriptions. 


05 

A simple site design for a local 
fine-dining restaurant including 
a menu. Subtle tones were used 
to accentuate the logo and keep 
the site easy on the eye. 
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GB 

,0 INSIDE 


The magazinefortheGNU generation 

_ Live booting 3-distro DVD free with every issue 


^£gSK direcTO 


Buy online at 

PUBLISHING www.imagineshop.co.uk 



» The essential read for Linux enthusiasts 
» Exclusive developer-dedicated mini-mag 
»The latest news from the global community 
»Tutorials helpingyou master newtechniques 
» Opinions & interviews with Linux luminaries 


LnuxUsetcua 

Never miss an update by subscribing to our RSSfeed today 


In print and online 









Talent directory 


Get 

listed here 

Find out how to add your agency to our chart 
by contacting the team at the following address: 

webdesigner@imagine-publishing.co.uk. 


Whether you need to hire web-design services or just want to 
locate the trade's best creative teams, our chart can help... 




2 Advanced Studios 

www.2advanced.com 


City Aliso Viejo 
Telephone 1 949 521 7000 
Contact info@2advanced.com 
Clients Adobe, Bacardi, Diesel 


Country USA 
Twitter ID 2advanced 


^ADVANCED 

ITUDlOfi 

Established in 1999,2Advanced is an award-winning interactive agency dedicated 
to pushing the creative boundaries of design and technology to deliver high-impact, 
rich media solutions. It boasts an exceptional reputation in Adobe Flash design and 
offers a host of services including interactive design, CMS solutions, eCommerce, 
motion graphics, 3D illustration and video production. 



Addictivity 

www.addictivity.com 

London 

UK 

0845 838 6718 

hello@addictivity.com 

addictivity 

Hitachi, Kickers, Motorola 

Agency Republic 

www.agencyrepublic.com 

London 

UK 

44 (020 7942 0000 

chat@agencyrepublic.com 

agencyrepublic 

adidas, EA, BBC, BP, 02 

AKQA 

www.akqa.com 

London 

UK 

(0)20 7780 4786 

info@akqa.com 

AKQA 

Coca-Cola, Virgin, McDonald’s, Nike, Visa, Xbox 

Angel London 

www.angellondon.co.uk 

London 

UK 

0845 468 0959 

info@angellondon.co.uk 

angellondon 

Sony Pictures, Chelsea FC, MTV, BT 

AWP New York 

www.awpny.com 

New York 

USA 

607 277 2757 

www.awpny.com/pages/feedback 

AWPNY 

Accufab, Cornell University 



Azexis 

www.azexis.com 

City Ipswich 

Telephone 01473 694500 
Contact sales@azexis.com 
Clients BBC, Kia, Business Link, LSC 


Country UK 
Twitter ID Azexis 


©A 


XI 


With a heritage in design and development since 1999, Azexis is an interactive 
agency with a talented team of specialists all sharing a single drive: to produce the 
best design, web and mobile solutions encompassing extraordinary functionality 
and creative design. Azexis offers a diverse range of services and supports an 
impressive array of clients worldwide. 



www.bartleboglehegarty.com 


(0)20 77341677 


richard.stainer@bbh.co.uk 


Axe, Baileys, LG, Sprite, Heineken 


BGT Partners 
Big Youth 


www.bgtpartners.com 


www.bigyouth.fr 


1 888 282 2487 
171183100 


bgtla@bgtpartners.com 

contact@bigyouth.fr 


dlclarke 

N/A 


Burger King, FedEx, Walt Disney 
AOL, Sony Ericsson, Nivea, Orange 



http://chips-ny.com 


office@chips-ny.com 


Top Magazine, Joffrey, d'employ, Matt Creed 



Gearleft 

http://clearleft.com 

City Brighton : Country UK 

Telephone 0845 838 6163 : Twitter ID clearleft 

Contact info@clearleft.com 

Clients WWF, Universal Networks, Channel 4 News, Mozilla 


This Brighton-based agency offers world-class UX 
services, thanks to a stellar team of designers and 
developers specialising in understanding user 
reguirements. Among the team are experts like 
Andy Budd, Richard Rutter and Jeremy Keith, who 
| r. are also respected speakers on the international 

Clcdl t conference circuit. 




Ciplex 

www.ciplex.com 

Los Angeles, CA 

USA 

1310 461 0330 

www.ciplex.com/contact us.html 

ciplex 

Upper Deck, Von Dutch 

Code23 

www.code23.com 

Reading 

UK 

44 (0)118 9306717 

www.code23.com/contact/ 

code23 

Oasis James, Sony Style, Adams Estates 

Content Formula 

www.contentformula.com 

London 

UK 

0207 3816671 

moreinfo@contentformula.com 

contentformula 

Johnson & Johnson, Kraft, Bausch & Lomb 

Coolpink 

www.coolpink.net 

Leeds 

UK 

44113 201 8290 

discovermore@coolpink.net 

coolpink 

Asda, NHS, Warner Music, Halfords 

Cre8 New Media 

www.cre8newmedia.com 

Ruislip 

UK 

01707 394 962 

info@cre8newmedia.com 

N/A 

Agenda Recruitment, Ocean Group 

Creare Design 

www.webdesigncreare.co.uk 

Leicester 

UK 

01455 88 37 00 

enquiries@creare.co.uk 

crearegroup 

Nicky Clarke, Life Music Foundation, Iveco 

Critical Mass 

www.criticalmass.com 

London 

UK 

020 8735 8750 

newbusiness.europe@criticalmass.com 

criticalmass 

Rolex, NASA, HP, Adidas 

d2x 

www.d2x.co.uk 

Basingstoke 

UK 

07512 076360 

info@d2x.co.uk 

d2x_co_uk 

Altro, Walkingworld 

Dare London 

www.daredigital.com 

London 

UK 

44 (0)203 451 9101 

london@thisisdare.com 

thisisdare 

Sony Ericsson, Hovis, Tetley, Penguin 

Delete 

www.deletelondon.com 

London 

UK 

0203 004 7155 

info@deletelondon.com 

DeleteLondon 

Red Bull, Decca Records 

Dizzain 

www.dizzain.com 

New York 

USA 

44 (20) 3290 9941 

mail@dizzain.com 

dizzain 

Webhuset, Financial Times, HIS Textiles, QxLab 

Digital Jigsaw 

www3.digitaljigsaw.com 

London 

UK 

0870 235 4042 

info@digital-jigsaw.com 

digitaljigsaw 

PepsiCo, Walkers, Budweiser 

Digital Marmalade 

www.digitalmarmalade.co.uk 

Beckenham, Kent 

UK 

44 (0)20 8249 5655 

info@digitalmarmalade.co.uk 

N/A 

Monarch, Yell.com, Trevor Sorbie 

Disturb Media 

www.disturbmedia.com 

London 

UK 

020 7138 3569 

contact@disturbmedia.com 

disturbmedia 

Swatch/MTV, Hertz 

Domani Studios 

http://domanistudios.com 

New York 

USA 

312 850 2919 

biz@domanistudios.com 

domanistudios 

Sheraton, Porsche, VW 

DRIFTLAB 

www.driftlab.com 

Atlanta, GA 

USA 

678 225 4351 

howdy@driftlab.com 

driftlab 

General Motors, Ford, Sony 

eckhoCreative 

www.eckhocreative.com 

Bristol 

UK 

01179 070273 

info@eckhocreative.com 

eckhoCreative 

Rocket Music Management, Nexus TV, ITV, CEF 

Fi 

www.f-i.com 

New York 

USA 

212 9415220 

interact@f-i.com 

F l 

Google, HTC, BBC, Fox, Porsche, Burton, EA 

Firstborn 

www.firstborn.com 

New York 

USA 

212 5811100 

info@fborn.com 

firstborn_nyc 

Apple, Doritos, Pepsi, Wrigley 

Fluid Creativity 

www.fluidcreativity.co.uk 

Hyde, Cheshire 

UK 

0845 6588 373 

info@fluidcreativity.co.uk 

fluidcreativity 

American Soda, Brother, NHS 

Form 

www.form.uk.com 

London 

UK 

020 70141430 

studio@form.uk.com 

N/A 

BBC, VH1, Cutty Sark Whisky 

Glass Slipper 

www.glassslipperinteractive.com 

Banbury 

UK 

01295 724568 

glasssliperinteractive.com/contact.php 

dpaultaylor 

Nexus Interiors, bell systemz 

glue Isobar 

www.glueisobar.com 

London 

UK 

020 7739 2345 

md@glueisobar.com 

glueisobar 

Oasis, The Sun 

GR/DD 

www.grdd.co.uk 

London 

UK 

020 7729 4222 

mail@grdd.co.uk 

GRDD London 

PlayStation, Warner Bros, Symantec, Nokia 

Guerilla 

www.guerilla.co.uk 

Newcastle 

UK 

4401912619799 

enquiries@guerilla.co.uk 

we are guerilla 

Network One, Green Metropolis 

Hi-ReS! 

www.hi-res.net 

London 

UK 

0207 729 3090 

info@hi-res.net 

N/A 

Chanel, Dolce & Gabbana, Nike 
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Featured agency: UPS http://chips-ny.com 

A closer look at what each listed agency has to offer the community 

Formed through the collaboration of designers Teddy 
Blanks, Adam Squires and developer Dan Shields, CHIPS 
is an agency based in the Williamsburg neighbourhood 
of Brooklyn, New York. In addition to websites, CHIPS are 
known for taking on projects spanning identity systems 
and logos, books, printed items, motion graphics, posters 
and apparel. Since setting up shop in 2009, they have 
worked with an eclectic mix of key clients including the 
Metropolitan Museum of Art, Make Music New York, 

Sneeze Magazine and American Friends of the Louvre. 



CHIPS 





JUXT Interactive 

www.juxtinteractive.com 

San Francisco, CA 

USA 

949 610 0800 

i nfo@j uxti nteractive.com 

juxtinteractive 

Sprite, Cisco, American Airlines, BMW, Adobe 

Kokokaka 

www.kokokaka.com 

Gothenburg 

Sweden 

031 711 54 50 

contact@kokokaka.com 

KOKOKAKA 

Burberry, IKEA, Wrangler 

Kudos Web Design 

www.kudoswebdesign.co.uk 

Manchester 

UK 

0161 236 5585 

info@kudoswebdesign.com 

N/A 

Tetra Pak, Taboo 

KURO 

www.kuro.la 

Long Beach, CA 

USA 

562 494 5070 

projects@kuro.la 

N/A 

N/A 

Liquid Light 

www.liquidlight.co.uk 

Brighton 

UK 

08456 58 88 35 

info@liquidlight.co.uk 

liquidlightuk 

Antwords, Charcol, Gifford 

Lonely Duck 

www.lonelyduck.se 

Stockholm 

Sweden 

46 70 689 96 02 

hello@lonelyduck.se 

LonelyDuckSTHLM 

Puma, New Balance, Bentley 

Lounge Lizard 

www.loungelizard.com 

New York 

USA 

1-888-444-0110 

info@loungelizard.com 

kenbraun 

America Online, Disney Interactive 

Lyrical Media 

www.lyricalmedia.com 

Worthing 

UK 

02081231 567 

lyricalmedia.com/contact 

LyricalMedia 

Virgin Atlantic, Ubisoft 

Mutado 

http://mutado.com 

Milan 

Italy 

39 02 34592733 

hello@mutado.com 

mutado 

Vodafone, Yahoo!, Nike 

Next Digital 

www.nextdigital.com 

Sydney 

Australia 

61 2 9336 7500 

sydney@nextdigital.com 

nextdigital 

Brisbane Water, Qantas 


Design your own 


^ IF jg^ T | 


Night Agency 

www.niqhtaqencv.com 


City New York 
Telephone 212 4311945 
Contact info@nightagency.com 
Clients Champion. ESPN, MTV, 20th Century Fox 


Country USA 
Twitter ID nightagency 


nightagency 


Located in downtown NYC and founded in 2004, Night Agency is a 46-person team 
offering creative and marketing solutions alongside a full repertoire of web-design 
services. Site building, eCommerce, UX planning, GUI design and Flash or iPhone 
development are just a few of the areas where this agency excels. 




North Kingdom 

www.northkingdom.com 

Skelleftea 

Sweden 

020 7749 5353 

info@northkingdom.com 

NorthKingdom 

Coca-Cola, Vodafone, adidas 

Nzime 

www.nzime.com 

Nottingham 

UK 

0115 950 9720 

people@nzime.com 

nzime 

Elastoplast, Microsoft Game Studios, Knox 

OMdeSIGN 

www.omdesign.co.uk 

London 

UK 

0208 248 2712 

contact@omdesign.co.uk 

omdesign 

City of London, Loft King, The Hokey Cokey Man 

Orange Bus 

www.orangebus.co.uk 

Newcastle 

UK 

0191 241 3703 

stuff@orangebus.co.uk 

@orangebus 

Barclays, Sage Pearson 

Podl 

www.pod1.com 

London 

UK 

020 7524 7660 

www.podl.com/contact-us 

Podl 

Tesco, Shell, Kenwood 

POKE London 

www.pokelondon.com 

London 

UK 

2077495353 

www.pokelondon.com/contact 

pokelondon 

Skype, Orange, Yahoo! 

Razorfish 

www.razorfish.com 

Seattle, WA 

USA 

1 206 816 8800 

www.razorfish.com/#/reach-us/email-us 

Razorfish 

adidas, Audi, Dell, 02 

Reactive 

www.reactive.com 

London 

UK 

44 (0)20 7550 8200 

uk.enquiries@reactive.com 

reactivemedia 

Lee Jeans, British Airways, NEC 




Resn 

www.resn.co.nz 

City Wellington 
Telephone +64 4 385 0705 
Contact newbusiness@resn.co.nz 
Clients Toyota Racing, BlackBerry, MTV 


Country New Zealand 
Twitter ID resn has noj 


Resn. 


Independently owned and based in New Zealand’s capital city, 
Resn is one of Australasia’s most-recognised agencies, having 
scooped FWA, Webby, SXSW and Pixel awards. Founded in 
2005 by Steve Le Marquand and Rik Campbell, the team is 
known for an innovative web and interactive portfolio of 
projects for a high-profile client list. 




R/GA 

www.rqa.com 


Country UK 
Twitter ID RGA 


City London 

Telephone 020 7071 3300 
Contact web@rga.com 

Clients Nokia, Barnes & Noble, Pepsi, Walmart, Nike 


I R/GA 


R/GA is recognised as one of the world’s leading digital agencies. The company was 
formerly known as R/Greenberg Associates and founded over 30 years ago, back in 
1977, by brothers Richard and Robert Greenberg, originally as a motion graphics 
agency before making the switch to interactive work. 



Soak Digital 

www.soak.co.uk 

Norwich 

UK 

01603 630631 

www.soak.co.uk/contact-us.php 

SoakDigital 

Axa, Harley Davidson, UEA, Archant 


Solid State Group 

www.solidstategroup.com 

London 

UK 

0207 613 7220 

info@solidstategroup.com 

solidstategroup 

Sony, Shell, Amnesty International 


Striker Multimedia 

www.strikermultimedia.com 

Aberdeen 

UK 

01224 269124 

hello@strikermultimedia.com 

StrikerMmedia 

C-Platform, Blueprint Training 


Sweden Unlimited 

www.swedenunlimited.com 

New York 

USA 

212 941 5904 

info@swedenunlimited.com 

swedenunlimited 

Vera Wang 


TAMBA Internet 

www.tamba.co.uk 

London 

UK 

0203 008 5110 

info@tamba.co.uk 

TAMBAJnternet 

Carphone Warehouse, EMI 


Tokyo Digital 

www.tokyodigital.co.uk 

Liverpool 

UK 

0151 709 9524 

gareth.martin@tokyodigital.co.uk 

TokyoAgency 

GWR, Letterpool, MOBO, Samsung 


Tomato 

www.tomato.co.uk 

London 

UK 

0207 490 2599 

info@tomato.co.uk 

N/A 

Citroen, Ford Ka.dunhill 


Tribal DDB LA 

http://tribalddb.com 

San Francisco, CA 

USA 

415 732 3600 

mike.parker@us.tribalddb.com 

TribalDDB 

Hasbro, McAfee, McDonald’s 


ultranoir 

www.ultranoir.com 

Paris 

France 

014 271 4836 

online form 

ultranoir 

eBay, HSBC, Peugeot, Lacoste, Thomas Cook 


Underwired 

www.underwired.com 

London 

UK 

020 70 600 400 

hello@underwired.com 

underwired 

McCain Foods, Peugeot, Virgin 


(untitled) 

www.untitledlondon.com 

London 

UK 

020 7871 7939 

fanmail@untitledlondon.com 

untitledlondon 

Hasbro, Spar, Lloyds TSB, Sky, Sony 


The Value Engineers 

www.thevalueengineers.com 

Beaconsfield 

UK 

01494 680999 

info@thevalueengineers.com 

ValueEngineers 

BP, Orange, Sony 


Vibe Creative 

www.vibecreative.co.uk 

Shrewsbury 

UK 

0845 263 7989 

studio@vibecreative.co.uk 

vibecreative 

E&J Jewellers, Somerset Housing 


Vivid Creative 

www.vividcreative.com 

Sheffield 

UK 

0114 261 7060 

info@vividcreative.com 

Vivid Creative 

N/A 


Webheads 

www.webheads.co.uk 

London 

UK 

0207 287 7060 

info@webheads.co.uk 

webheadsdigital 

BBC, NHS, Texaco 


Wevio 

www.wevio.com 

New York 

USA 

1 212 537 9432 

contact@wevio.co.uk 

Wevio 

Samsung, IBM, Verizon 


Wickedweb 

www.wickedweb.co.uk 

London 

UK 

020 7183 4999 

www.wickedweb.co.uk/contact 

InsideWickedweb 

Nectar, Kurt Geiger, NSPCC 


Wieden+Kennedy 

www.wkamst.com 

Amsterdam 

Flolland 

31.20.7126.500 

lee.newman@wk.com 

WKAmsterdam 

EA, Heineken, Nike 


Your Majesty 

www.your-majesty.com 

New York 

USA 

212 685 3427 

info@your-majesty.com 

yourmajestyco 

Hyundai, Cisco, Yahoo! 


The Zen Agency 

www.thezenagency.com 

Glasgow 

UK 

01412291333 

online form 

zenagency 

The HALO Trust, Mackie’s, Hilton 
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Your favourite magazines n 



3D Artist Retro Gamer X360 SciFiNow 








Search 


iPad Apps 1-12 of is 


Save up to i 

40 % 

off regular 
price for digital 
editions 


THE MAGAZINE THAT FEEDS MINDS 

HOW IT* 


BE-ffl 


Advanced Photoshop 

Imagine Publishing 
Books 

Released 14 October 2011 
***** 7 Ratings 


X360 

Imagine Publishing 
Bosks 

Released October 2011 

* * * * * 41 P 


iCrcnie Magazine App 

Imagine Publishing 


<Vlt 


Released 13 October 2511 
it**-*- Ifl Palings 


Web Designer 

Imagine Publishing 
Books 

Released 17 October 2511 
it ic * * Hr it Ratings 


SciFi Now 

Imagine Publishing 
Books 

Released 14 October 2011 
***** 6 Ratings 


Play Magazine App 

Imagine Publishing 
Books 

Released 14 October 3011 
★ 5 Ratings 


360 Magazine App 

Imagine Publishing 
Books 

Released 14 October 1 2011 

***** 


GamesTM 

lniiiijinu Publishing 


How It Works 


Immraa a^s (% 


V' & Developer 

Make money 
Android 4.CT 

Turn code ir no cash by de^oloptlg- ^ _ 

^daepsandKcfc 

Foundation' *= £ £^ 5 r£W?! 

: s. ■ ■ ■ i ■ ■ i ’ ‘ir i ’ :! >:'p Mi 


Released 13 October 2011 
***** 7Ratings 


Build your own router 

S’tipuy'Ar ualfcand pfoleci _ 


Email client supertesl 


IS : U-LED 


Dor 2011 
wigs 


Linux User & Developer 


Available now on 
the Apple iOS 5 
Newsstand app 

Search for Imagine 













































Everything you love 
about magazines but 
now in digital form and 
yours forever! 


digital* 
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inspiration fi advice for ire creative oomririty 


Andrew Jones 

ShSVM hii 

PBaWr treks il Ihfi 
wlmkiin T.ifl 


LEARN TO BUILD WITH HTML'S BIGGEST TAG 


MASTER PROFESSIONAL 

COMPOSITING 


RENDER 3D 
WEB OB JECTS 


Digital Artist games™ Advanced Photoshop Web Designer 



PI IOTO 
FIXES j| 


BEST APRS FI 


For Mac, iPad and iPhone 


Shoot, edit & share better photos^gg 


users 


reate 


Learn to- set up & troubleshoot the ultimate home network 


ras© J 
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.... .i- 


portraits r*»y pop 




iCreate 


Photography for Beginners 


Digital Photographer 


113 NUNS OF VIDEO TUTORIALS 

- M Undone far fftoft rthfr p ihfc ■ fffcrt hmilWL pfaMfai 3 fanfci, 


Photoshop 

creative 


Photoshop beginners 
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gifm 
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_ I ARE YOU BEING W* 

I RIPPED OFF? H 

lr ■ V FIND OUT WHAT'S t IN YOUR WJ‘. 


Photoshop Creative 


360 Magazine 


Apps Magazine 


I Mini 

Total 911 


# Download direct to your 
iPhone or iPad 

# Once downloaded, no internet 
connection needed to enjoy 

fk Subscribe for 6 or 12 months 


kt Pages are flickable, zoomable 
and viewed in either 
widescreen or portrait format 

fk Purchase individual issues 
# Share it with your friends 


Download now 
from the iTunes I 
Newsstand app 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

•Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 
•Unlimited web space • No-risk trial - 3 months free 


I Hosting listings 






Got a deal 
you think we 
should list? 


Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

| webdesigner@imagine-publishing.co.uk 

^Jam^nchjr^ 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



l&i 


1&1 Internet Ltd. 

www.1and1.co.uk 


1&1 Starter (Linux) 

1&1 Standard (Linux) 
1&1 Standard (MS) 

1&1 Unlimited (Linux) 
1&1 Unlimited (MS) 
1&1 Business (Linux) 
1&1 Business (MS) 


08443351211 £29.88 5GB 

08443351211 £59.88 50GB Unlimited 

08443351211 £71.88 50GB Unlimited 

08443351211 £83.88 Unlimited Unlimited 

08443351211 £107.88 Unlimited Unlimited 

08443351211 £119.88 Unlimited Unlimited 

08443351211 £155.88 Unlimited Unlimited 


Unlimited 1,000 
3,000 
3,000 
5,000 
5,000 
Unlimited 
Unlimited 
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111WebHost.COm Unlimited Web Hosting Pack 

N/A 

£59.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

X 

/ 

/ 

X 

|±±± VveDrlOStg 

http://111webhOSt.com starter Web Hosting Pack 

N/A 

£23.99 

5GB 

2GB 

100 

/ 

/ 

/ 

/ 

X 

/ 

/ 

X 

1 Truly Unlimited Web Hosting 

Budget Web Hosting Pack 

N/A 

£11.99 

1GB 

1GB 

5 

/ 

X 

/ 

/ 

X 

/ 

/ 

X 


Word Press Web Hosting Pack 

N/A 

£23.99 

5GB 

2GB 

100 

/ 

/ 

/ 

/ 

X 

/ 

/ 

X 


Drupal Web Hosting Pack 

N/A 

£23.99 

5GB 

2GB 

100 

/ 

/ 

/ 

/ 

X 

/ 

/ 

X 


Joomla! Web Hosting Pack 

N/A 

£23.99 

5GB 

2GB 

100 

/ 

/ 

/ 

/ 

X 

/ 

/ 

X 


123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

123-reg (www.123-reg.co.uk) 

2020Media (www.2020media.com) 
2020Media (www.2020media.com) 
2020Media (www.2020media.com) 
2020Media (www.2020media.com) 
2020Media (www.2020media.com) 

4D Data Centres (www.4dhosting.com) 

4D Data Centres (www.4dhosting.com) 

4D Data Centres (www.4dhosting.com) 

4D Data Centres (www.4dhosting.com) 

4D Data Centres (www.4dhosting.com) 
Blackfoot Hosting Ltd (www.blackfoot.co.uk) 
Blackfoot Hosting Ltd (www.blackfoot.co.uk) 
Blackfoot Hosting Ltd (www.blackfoot.co.uk) 
Blackfoot Hosting Ltd (www.blackfoot.co.uk) 
Blacknight (www.blacknight.com) 

Blacknight (www.blacknight.com) 

Blacknight (www.blacknight.com) 

Bravo14 (http://bravo14.co.uk) 

Bravo14 (http://bravo14.co.uk) 

Bravo14 (http://bravo14.co.uk) 

Bravo14 (http://bravo14.co.uk) 

Bravo14 (http://bravo14.co.uk) 

Bravo14 (http://bravo14.co.uk) 

Daily Internet (www.daily.co.uk) 

Daily Internet (www.daily.co.uk) 

Daily Internet (www.daily.co.uk) 

Daily Internet (www.daily.co.uk) 

Designwasp (http://designwasp.com) 
Designwasp (http://designwasp.com) 
Designwasp (http://designwasp.com) 
Designwasp (http://designwasp.com) 
Designwasp (http://designwasp.com) 


Starter 

0845 859 0018 

£29.88 

1GB 

5GB 

20 

X 

X 

X 

y 

y 

y 

y 

X 

Plus 

0845 859 0018 

£59.88 

5GB 

50GB 

500 

/ 

X 

X 

y 

y 

y 

y 

X 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 

X 

X 

y 

y 

y 

y 

X 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1,000 

/ 

X 

X 

y 

y 

y 

y 

X 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

/ 

X 

X 

y 

y 

y 

y 

X 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 

X 

X 

y 

y 

y 

y 

X 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1,000 

/ 

X 

X 

y 

y 

y 

y 

X 

Light User 

0870 321 2020 

£45 

20MB 

1GB 

3 

/ 

/ 

y 

y 

y 

y 

y 

X 

Everyday 

0870 321 2020 

£100 

200MB 

10GB 

15 

/ 

/ 

y 

y 

y 

y 

y 

X 

Business/Pro 

0870 321 2020 

£275 

500MB 

20GB 

50 

/ 

/ 

y 

y 

y 

y 

y 

X 

JAVA Tomcat 

0870 321 2020 

£300 

100MB 

3GB 

15 

/ 

/ 

y 

y 

y 

y 

y 

X 

ASP.Net 

0870 321 2020 

£275 

100MB 

3GB 

15 

/ 

/ 

y 

y 

y 

y 

y 

X 

Bronze Package 

0845166 8386 

£40 

10MB 

500MB 

2 

/ 

X 

y 

y 

y 

y 

y 

X 

Silver Package 

0845166 8386 

£64.99 

20MB 

2GB 

10 

/ 

X 

y 

y 

y 

y 

y 

X 

Gold Package 

0845166 8386 

£79.99 

50MB 

2GB 

50 

/ 

X 

y 

y 

y 

y 

y 

X 

Titanium Package 

0845166 8386 

£149.99 

500MB 

5GB 

500 

/ 

X 

y 

y 

y 

y 

y 

/ 

Reseller Package 

0845166 8386 

£299.99 

1GB 

10GB 

1,000 

/ 

X 

y 

y 

y 

y 

y 

y 

Home 

N/A 

£40 

500MB 

5GB 

5 

/ 

y 

y 

y 

X 

y 

y 

X 

Business 

N/A 

£50 

1GB 

20GB 

100 

/ 

y 

y 

y 

X 

y 

y 

X 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

/ 

y 

y 

y 

X 

y 

y 

X 

Professional 

N/A 

£150 

3GB 

60GB 

300 

/ 

y 

y 

y 

X 

y 

y 

X 

Minimus 

35359 918 3072 

£45 

10GB 

200GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

X 

Medius 

35359 918 3072 

£79 

20GB 

400GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

X 

Maximus 

35359 918 3072 

£45 

30GB 

600GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

X 

Starter Linux 

N/A 

£130 

2,000MB 

2,000MB 

10 

/ 

y 

y 

y 

X 

y 

y 

/ 

Starter Windows 

N/A 

£20 

2,000MB 

2,000MB 

10 

/ 

y 

y 

y 

X 

y 

y 

/ 

Business Linux 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

/ 

y 

y 

y 

X 

y 

y 

y 

Business Windows 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

/ 

y 

y 

y 

X 

y 

y 

y 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

y 

y 

X 

y 

y 

y 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

y 

y 

X 

y 

y 

y 

Entry 

0845 466 2100 

£19.28 

500MB 

5GB 

75 

/ 

X 

y 

X 

y 

y 

y 

X 

Home 

0845 466 2100 

£50.90 

3GB 

30GB 

30 

/ 

y 

y 

X 

y 

y 

y 

X 

Business 

0845 466 2100 

£53.94 

12GB 

150GB 

600 

/ 

y 

y 

X 

y 

y 

y 

X 

Business Plus 

0845 466 2100 

£77.94 

24GB 

250GB 

Unlimited 

/ 

y 

y 

X 

y 

y 

y 

X 

Starter 

0844 372 9848 

£30 

3GB 

20GB 

1,000 

/ 

y 

X 

y 

X 

y 

y 

X 

Home 

0844 372 9848 

£40 

10GB 

50GB 

10,000 

/ 

y 

X 

y 

X 

y 

y 

X 

Business 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

X 

y 

X 

y 

y 

X 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

X 

y 

X 

y 

y 

X 

Windows Home 

0844 372 9848 

£40 

10GB 

50GB 

1,000 

/ 

y 

X 

y 

X 

y 

y 

X 
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In association with 




Get your listing highlighted! Contact Richard 
© richard.rust@imagine-publishing.co.uk 
0+44(0)1202586436 hosting listings 



Featured host of the month: NameHog www.namehog.net 

Offering more reasons for choosing one of the listed providers 



NameHog is a hosting brand that places a big emphasis on 
being based within the UK. It makes a guarantee to customers 
to place their sites within BlueSquare data centres used by the best 
in the business to deliver the fastest UK download speeds, largest 
bandwidth and better search engine listings than the rest. They also 


understand the need for reliability when it comes to uptime, and 
an assurance that if things go wrong you get the 24-hour customer 
support required. All of their main hosting packages come with an 
impressive selection of features in terms of security, scripting support, 
email provision and databases, with full details listed via the website. 


NAME AND URL 


Designwasp (http://designwasp.com) 

Digital Gibbon Ltd (http://digitalgibbon.com) 
Digital Gibbon Ltd (http://digitalgibbon.com) 
Digital Gibbon Ltd (http://digitalgibbon.com) 
Digital Gibbon Ltd (http://digitalgibbon.com) 
Domaincheck (www.domaincheck.co.uk) 
Domaincheck (www.domaincheck.co.uk) 


Donhost (www.donhost.co.uk) 
Donhost (www.donhost.co.uk) 
Donhost (www.donhost.co.uk) 
Donhost (www.donhost.co.uk) 
eHosting (www.ehosting.com) 



CheapHost 
Personal 
Personal Plus 
Business 

Business Professional 
Bronze Linux 
Gold Linux 


0844 372 9848 
01865 589 990 
01865 589 990 
01865 589 990 
01865 589 990 
0191 2612252 
01912612252 



Enterprise 

Commerce 

Designer 

Developer 

Starter 


0845 226 5566 
0845 226 5566 
0845 226 5566 
0845 226 5566 
0844 999 4100 


£89.99 

£179.99 

£119.99 

£259.99 

£23.88 


1GB 

2GB 

1GB 

2GB 

1GB 


2GB 

5GB 

2GB 

5GB 

25GB 


250 

500 

250 

500 


Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

01912612252 

£30 

100MB 

1GB 

5 

X 

/ 

/ 

/ 

/ 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

01912612252 

£100 

500MB 

5GB 

25 

/ 

/ 

/ 

/ 

/ 

y 

y 

Donhost (www.donhost.co.uk) 

Reseller Unix 

0845 226 5566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

/ 

X 

/ 

/ 

/ 

y 

y 

Donhost (www.donhost.co.uk) 

Reseller Windows 

0845 226 5566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 

X 

/ 

/ 

/ 

y 

y 


eHosting (www.ehosting.com) 

Personal 

0844 999 4100 

£59.88 

2.5GB 

Unlimited 

50 

y 

X 

X 

X 

X 

y 

y 

eHosting (www.ehosting.com) 

Expert 

0844 999 4100 

£95.88 

5GB 

Unlimited 

250 

y 

X 

X 

X 

X 

y 

y 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

y 

X 

X 

X 

y 

y 

y 

Equiphase (www.equiphase.net) 

Bronze 

0121 314 4865 

£30 

200MB 

2GB 

10 

y 

y 

X 

y 

X 

y 

y 

Equiphase (www.equiphase.net) 

Silver 

0121 314 4865 

£42 

400MB 

5GB 

20 

y 

y 

X 

y 

X 

y 

y 

Equiphase (www.equiphase.net) 

Gold 

0121 314 4865 

£72 

800MB 

10GB 

100 

y 

y 

X 

y 

X 

y 

y 

Equiphase (www.equiphase.net) 

Platinum 

0121 314 4865 

£114 

1,200MB 

40GB 

200 

y 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 

X 

X 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 

X 

X 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249 823 

£140 

5GB 

10GB 

25 

/ 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

y 

y 

y 

y 

y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

y 

y 

y 

y 

X 

y 

y 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

y 

y 

y 

y 

X 

y 

y 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

X 

y 

y 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

X 

y 

y 



4; 

Fasthosts 

www.fasthosts.co.uk 

Personal Standard 

Business Standard 

Business Premium 

WD Starter Reseller 

Advanced Reseller 

0844 583 0777 

0844 583 0777 

0844 583 0777 

0844 583 0777 

0844 583 0777 

£53.88 

£95.88 

£173.88 

£149.99 

£199.99 

5GB 

25GB 

50GB 

20GB 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

500 

1,000 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

X 

Option 

/ 

Option 

Option 

/ 

/ 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

X 

X 

X 

X 


Giacom (www.giacom.com) 

Business Pro 

0800 542 7500 

£199 

100MB 

2GB 

100 

/ 

y 

y 

/ 

y 

y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 644 7750 

£29.80 

2.5GB 

10GB 

1,000 

X 

X 

X 

/ 

X 

y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

0845 644 7750 

£89.99 

10GB 

50GB 

10,000 

/ 

y 

X 

/ 

X 

y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

X 

/ 

X 

y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

0845 644 7750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

X 

/ 

X 

y 

y 

/ 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 

X 

Option 

y 

/ 

X 

y 

y 

X 

Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

/ 

Option 

y 

/ 

y 

y 

y 

X 

Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

/ 

Option 

y 

/ 

y 

y 

y 

X 

Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

/ 

Option 

y 

/ 

y 

y 

y 

X 

Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

y 

Option 

y 

/ 

y 

y 

y 

X 

Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

/ 

X 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

y 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

y 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

y 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Enterprise Plus 

0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

y 

y 

option 

/ 

y 

y 

y 

X 

ICUK www.icukhosting.co.uk 

Reseller Windows 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

y 

y 

option 

/ 

y 

y 

y 

X 
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Our web hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web hosting provider 

•Unlimited websites • Use your own brand throughout 
• Unlimited bandwidth • 24/7 expert U K-based support 
•Unlimited web space • No-risk trial - 3 months free 

I Hosting listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 



Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

©+44(0)1202586436 

Continued... 


NAME AND URL 


ICUK www.icukhosting.co.uk 
ICUK www.icukhosting.co.uk 
JAB Web Hosting (www.jabwebhosting.com) 
JAB Web Hosting (www.jabwebhosting.com) 
JAB Web Hosting (www.jabwebhosting.com) 
JAB Web Hosting (www.jabwebhosting.com) 
JAB Web Hosting (www.jabwebhosting.com) 
LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

Lemonstorm (www.lemonstorm.com) 
Lemonstorm (www.lemonstorm.com) 
Lemonstorm (www.lemonstorm.com) 

Media Temple (http://mediatemple.net) 
Media Temple (http://mediatemple.net) 
NameHog (www.namehog.net) 

NameHog (www.namehog.net) 

NameHog (www.namehog.net) 

NameHog (www.namehog.net) 

Namesco (www.names.co.uk) 

Namesco (www.names.co.uk) 

Namesco (www.names.co.uk) 

Namesco (www.names.co.uk) 

Namesco (www.names.co.uk) 



Reseller Linux 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

y 

y 

y 

y 

X 

Reseller Enterprise 

0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

y 

y 

y 

y 

X 

Mail - M105 

0800 043 0153 

£15.17 

256MB 

3GB 

50 

X 

X 

X 

y 

y 

y 

y 

y 

Home - H25 

0800 043 0153 

£24.47 

1GB 

8GB 

50 

/ 

X 

X 

y 

y 

y 

y 

y 

Professional - P55 

0800 043 0153 

£45 

2GB 

15GB 

75 

/ 

y 

X 

y 

y 

y 

y 

y 

Reseller - R25 

0800 043 0153 

£97.88 

2GB 

30GB 

250 

y 

y 

X 

y 

y 

y 

y 

y 

Reseller-R105 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

y 

y 

X 

y 

y 

y 

y 

y 

Blog 

01438 342 490 

£20 

100MB 

1GB 

5 

X 

X 

y 

y 

y 

y 

y 

y 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 

X 

X 

y 

y 

y 

y 

y 

y 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 

X 

X 

y 

y 

y 

y 

y 

y 

Dynamic 

01438 342 490 

£50 

2GB 

2GB 

20 

y 

y 

y 

y 

y 

y 

y 

y 

Premium 

01438 342 490 

£80 

5GB 

5GB 

50 

y 

y 

y 

y 

y 

y 

y 

y 

Unlimited 

01438 342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

LD Budget (Linux) 

07891 235858 

£11.88 

1GB 

1GB 

500 

y 

y 

X 

y 

y 

y 

y 

X 

LD Home (Linux) 

07891235858 

£23.88 

10GB 

10GB 

5,000 

y 

y 

X 

y 

y 

y 

y 

X 

LD Pro (Linux) 

07891235858 

£41.88 

50GB 

50GB 

20,000 

y 

y 

X 

y 

y 

y 

y 

X 

LD Unlimited (Linux) 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

X 

y 

y 

y 

y 

X 

Windows Home 

07891235858 

£17.88 

2GB 

2GB 

1,000 

y 

y 

X 

y 

y 

y 

y 

X 

Windows Unlimited 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

X 

y 

y 

y 

y 

X 

Home/Office 

0845 680 0843 

£45 

500MB 

10GB 

5 

y 

y 

y 

y 

y 

y 

y 

y 

Professional 

0845 680 0843 

£91 

1GB 

20GB 

50 

y 

y 

y 

y 

y 

y 

y 

y 

Professional 

0845 680 0843 

£185 

2GB 

30GB 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Shared-Server Pro 

+1 310 841 5500 

£64 

2GB 

1TB 

1,000 

y 

y 

y 

y 

y 

y 

y 

y 

Shared-Server Advanced 

+1 310 841 5500 

£109 

5GB 

1.5TB 

5,000 

y 

y 

y 

y 

y 

y 

y 

y 

Starter 

01604 212904 

£37.08 

10GB 

100GB 

Unlimited 

X 

X 

y 

y 

y 

y 

y 

y 

Home Pro 

01604 212904 

£62.28 

25GB 

500GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Business 

01604 212904 

£103.08 

75GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Reseller 

01604 212904 

£103.08 

100GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Startup Plus 

0845 363 3632 

£89.99 

500MB 

5GB 

10 

y 

y 

y 

y 

y 

y 

y 

y 

Business 

0845 363 3632 

£149.99 

2,000MB 

20GB 

100 

X 

X 

y 

y 

y 

y 

y 

y 

Business Plus 

0845 363 3632 

£89.99 

3,000MB 

30GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Designer 

0845 363 3632 

£239.88 

1GB 

20GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


^ NETCETERA 

Netcetera www.netcetera.co.uk 

DEVELOPER 

ONE 

RESELLER 

VM500 Server 

2200DC Server 

3000DC Server 
2600QC Server 

0800 0612801 

0800 061 2801 

0800 0612801 

0800 0612801 

0800 0612801 

0800 061 2801 

0800 0612801 

£32.89 

£109.99 

£274.89 

£300 

£720 

£1200 

£1800 

1GB 

5GB 

Unlimited 

20GB 

160GB 

2x500GB 

2x500GB 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

500 

1000 

1000 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

/ 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

/ 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

/ 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1,000 

10GB 

10GB 

10 

/ 

/ 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

/ 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3,000+ 

73GB+ 

1,500GB 

100+ 

/ 

/ 

y 

y 

y 

y 

y 

y 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 

X 

X 

y 

y 

X 

y 

y 

X 

PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 

X 

X 

y 

y 

X 

y 

y 

X 

PurplePaw (www.purplepaw.co.uk) 

Pius 

N/A 

£65 

750MB 

5GB 

25 

y 

y 

y 

y 

X 

y 

y 

X 

PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

y 

y 

y 

y 

X 

y 

y 

X 

PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

y 

y 

y 

y 

X 

y 

y 

X 

Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843 289 4625 

£18 

1GB 

Unlimited 

10 

y 

X 

y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

0843 289 4625 

£107.88 

100GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

y 

X 

y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 321 7788 

£69 

20MB 

2GB 

1 

y 

X 

y 

y 

y 

y 

y 

y 
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In association with 


fasthcts ts 


Get your listing highlighted! Contact Richard 
^ ! | O richard.rust@imagine-publishing.co.uk 

O +44 (0)1202586436 hosting listings 




Can you 
recommend 
your host? 


Tweet us today with your 
hosting comments and advice 

Q @WebDesignerMag 




NAME AND URL 


Skymarket (www.skymarket.co.uk) 
Skymarket (www.skymarket.co.uk) 

STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 



Premium 1 
Premium 2 
STRATO EasyWeb 
STRATO PowerWeb 
STRATO AdvancedWeb 
STRATO EnterpriseWeb 
Trial (3 month) 

Starter 

Personal 

Plus 

Multisite 


0800 321 7788 
0800 321 7788 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 


Swish Hosting (www.swishhosting.co.uk) 

Email 

08445 67 69 71 

£18 


Unlimited 

Unlimited 

X 

X 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Windows Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Linux Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

eCommerce 

08445 67 69 71 

£90 


Unlimited 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

SiteBuilder 

08445 67 69 71 

£12 


Unlimited 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 

y 

Switch Media (www.switchmedia.com) 

Switch Standard 

0151 236 9111 

£159 

1GB 

50GB 

500 

/ 

X 

X 

X 

y 

y 

X 

X 

Switch Media (www.switchmedia.com) 

Switch Business 

0151 236 9111 

£249 

10GB 

150GB 

1500 

y 

X 

X 

X 

y 

y 

y 

X 

Switch Media (www.switchmedia.com) 

Business Pro 

0151 236 9111 

£348.96 

20GB 

300GB 

5000 

y 

X 

X 

X 

y 

y 

y 

X 

thename.co.uk (www.thename.co.uk) 

Parking 

0870 765 6364 

£52.88 

25MB 

500MB 

15 

y 

y 

y 

y 

y 

y 

y 

X 

thename.co.uk (www.thename.co.uk) 

Forwarding 

0870 765 6364 

From £15 

N/A 

500MB 

N/A 

X 

X 

y 

y 

y 

y 

y 

X 

thename.co.uk (www.thename.co.uk) 

Hosting 

0870 765 6364 

From £7.50 

N/A 

N/A 

N/A 

X 

X 

X 

y 

y 

y 

y 

X 

TwentyHost (www.twentyhost.co.uk) 

Basic5S 

0845 641 0776 

£24 

100MB 

1,500MB 

25 

y 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Standard5S 

0845 641 0776 

£45 

200MB 

3,000MB 

50 

y 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Business5S 

0845 641 0776 

£70 

500MB 

7,500MB 

100 

/ 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Advanced5S 

0845 641 0776 

£110 

1,000MB 

15,000MB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Basic 

0208144 7057 

£47.88 

2GB 

10GB 

10 

y 

X 

X 

y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Plus 

0208144 7057 

£71.88 

4GB 

100GB 

100 

/ 

y 

X 

y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Extra 

0208144 7057 

£119.88 

unlimited 

Unlimited 

Unlimited 

y 

y 

X 

y 

y 

y 

y 

y 

WebFusion (www.webfusion.co.uk) 

Fusion Professional 

08451301602 

£107.40 

5GB 

50GB 

1,000 

y 

X 

y 

y 

y 

y 

y 

X 

WebFusion (www.webfusion.co.uk) 

Fusion Business 

08451301602 

£179.40 

10GB 

150GB 

1,500 

y 

X 

y 

y 

y 

y 

y 

X 

WebFusion (www.webfusion.co.uk) 

Fusion Developer 

08451301602 

£227.40 

20GB 

300GB 

5,000 

y 

X 

y 

y 

y 

y 

y 

X 

WebFusion (www.webfusion.co.uk) 

Fusion Reseller 

08451301602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

y 

X 

y 

y 

y 

y 

y 

X 

Web Wiz (www.webwiz.co.uk) 

Windows Starter 

0844 3581450 

£69.95 

1GB 

25GB 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Professional 

0844 3581450 

£149.95 

4GB 

100GB 

500 

y 

y 

y 

y 

y 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Starter Reseller 

0844 3581450 

£199.95 

5GB 

25GB 

500 

/ 

y 

y 

y 

y 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Business Reseller 

0844 3581450 

£499.95 

20GB 

200GB 

5,000 

y 

y 

y 

y 

y 

y 

y 

y 

Zebra Internet (www.zebrainternet.com) 

Starter Pro 

N/A 

£10.99 

5GB 

40GB 

50 

/ 

X 

y 

y 

X 

y 

y 

y 

Zebra Internet (www.zebrainternet.com) 

Business Pro 

N/A 

£46.99 

10GB 

80GB 

500 

y 

y 

y 

y 

X 

y 

y 

y 

Zebra Internet (www.zebrainternet.com) 

Ultimate Pro 

N/A 

£79.99 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

y 

y 

X 

y 

y 

y 



Bronze (Linux) 

0845058 9000 

£47.88 

2GB 

20GB 

10 

/ 

y 

y 

y 

/ 

y 

y 

X 


Silver (Linux) 

0845058 9000 

£95.88 

5GB 

50GB 

25 

/ 

y 

y 

y 

/ 

y 

/ 

X 

f/£]; : 

Gold (Linux) 

0845058 9000 

£143.88 

10GB 

100GB 

50 

/ 

y 

y 

y 

/ 

y 

/ 

X 


Platinum (Linux) 

0845058 9000 

£239.88 

50GB 

250GB 

100 

/ 

y 

y 

y 

/ 

y 

/ 

X 


Reseller (Linux) 

0845058 9000 

£479.88 

150GB 

500GB 

250 

/ 

y 

y 

y 

/ 

y 

/ 

X 


Designer (Windows) 

0845058 9000 

£59.88 

2GB 

20GB 


/ 

x 

X 

y 

/ 

y 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

0845058 9000 

£179.88 

10GB 

100GB 


/ 

X 

X 

y 

/ 

y 

/ 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up, monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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igner 

next-issue 



INCREASE TRAFFIC WITH 


Google Analytics 


KEEP TRACK OFSITE PERFORMANCE WITH THE UNDISPUTED GIANTOFWEB METRICS AND SEO 
-SETTING URWHATTO WATCH,KEY STATISTICS,ACCESSING REAL-TIME RESULTS ANDMORE! 





SHOUT DIGITAL 


ADOBEEDGE 


The Pro File tour bus journeys up to Newcastle to meet 
one of the Norths brightest agency prospects 


Take a look inside the new scripting 
features of Adobes motion and interactive 
designer for HTML5 


22*0 COMMERCE 


The team at WooThemes offer a guide to 
adding eCommerce to WordPress, along 
with a free theme! 


Visit the WEB DESIGNER online shop at 

imagjneshop.co.uk 

for back issues, books and merchandise 


ALL IN YOUR LATEST 

iVjaaiiDCicejfli: 


Issue 194 on sale 

Thursday 8 March 2012 


: 
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_ next month 
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classified advertising oieoe 586436 


WrfH _ 

ceakcer 


Everything you need to work 
better online from Fast hosts 

That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, 
hosted email or online backup. It’s a service your 
business can rely on. 

You’ll get award-winning technology, but you’ll also 
have the support of people who can help you work 
better online. If you need to call us, you’ll find our team 
of IT experts happy and eager to help. It all adds up to 
a service your business can rely on. 

Find out how your business can work better online 

call free on 0800 6520 444 
or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 



hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


© 2012 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. 

Terms & Conditions apply, see website for details. 




designer 


1&1 WEB HOSTING 


SECURE 

&SAVE! 


1&1 STARTER 

■ 5 GB Web Space 

■ dHMIED Traffic 

■ NBftfe 1 MySQL 5 Database 

■ NM 1&1 SiteAnalytics 

■ 1000 IMAP/POP3 
E-mail Accounts 


FREE 

FOR 6 MONTHS 


then £2.49/month* 


1&1 STANDARD 


■ 50 GB Web Space 

■ mm Traffic 

■ NEW: 10 MySQL 5 Databases 

■ NEV\g 1 &1 SiteAnalytics 

■ 3000IMAP/P0P3 E-mail 
Accounts 

FREE 

FOR 6 MONTHS 

^^^herHI499/^ 


.co.uk 

now only £2.49 first year 

.eu 

now only £4.99 first year 


1&1 DOMAINS 

starting at 


first year* 


* Special offers for a limited time only. 

Visit www.1 andl .co.uk for full promotional 
offer details, terms and conditions. 

Prices exclude VAT. 


Call 

0844 3351211 


1&1 




www.1and1.co.uk 






cheaper than our 
leading competitors 

without any loss of service or quality....Guaranteed! 


GO» 

COMPILA 



imagineshop.co.uk-,- 


Read anything 
good lately? 

Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 














classified advertising 01808 586436 




* Special offer for a limited time only. Special offer price on .co.uk, .eu and .com domains applies for the first year of registration, subsequent years will be charged at standard price. 
Visit www.landl.co.uk for full promotional offer details, terms and conditions. Prices exclude VAT. 
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Available on Linux & Windows 




visit www.111WebHost.com for the full range 


Instant activation | FREE & fast customer support | One-Click Script Installations | 99.99% Uptime 



lilWebHostffi 
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PostcodeAnywhere 

The easiest way to add features to your website* 

UK & international addressing | Address deansing 
Pay me n t va I id ati o n | C u st o m e r p rofi ling 
Store finder 


To find out more: 

Call: 0800 047 0495 
www.postcodeanywhere.com 




trade secret 

noun {c} 'tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 + vat 
Eliminate spelling mistakes 


80 % red u ctio n of keystro kes e nte ring a dd resses 
Create a profession a I image for your clients 
S im pie i ntegrat io n with S D K & wo rk i ng exa m p les 


Reduced abandoned carts 

For more details visit postcode-softwa re.net or call 084583 82 666 



Everything you need to work better 
online from Fasthosts 

That’s not just a web-hosting package, a domain name, a virtual or dedicated 
server, broadband, hosted email or online backup. It’s secure technology 
that protects your business. 

There’s lots to worry about when you run a business. But you don’t have to 
worry about the safety of your business-critical information. You don’t 
even have to worry about the safety of the information that isn’t that critical. 
Whichever service you choose from Fasthosts, you’ll get the peace of mind 
that comes from secure, UK data centres. 

Find out how your business can work better online 

can free on 08006520444 or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 



hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


motor ferKf- <mUf/t 

WifH 

sTcu tfC 

reafHoLo&7 



© 2012 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. 

Terms & Conditions apply, see website for details. 
















greattfigftaimags - The official download website of imagine Publisl 


HO HI SUBSCRIPTIONS CONTACT US 


Magazines 


Shoot, edit & share bett 








































ling Imag/neBookShop irnagneSubs ImagjineShop 


Si Advanced ■ 

Photoshop 

i *u *A*r< PNtaf^' (TT+nttib. B II 


iBRdrz 


No Disc. No Problem 


Many of the files you’re looking for can be 
found on the magazine’s website 


Imagine digital editions 
are a new and exciting 
way to experience our 
world-leading magazines 


To get the most out of your digital 
editions, be sure to enjoy all of our 
fantastic features, including: 

• Zoomable text and pictures 

• In-app browsing 

r+ s_i_i— i _ j__j_ 

U 


To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDigitalMags.com 




























Tables 

The key layout 
component, as was the 
case for most websites in 
2001, was a collection of 
tables and nested ones. 
The site used a single 
tabt£ to wrap around all 
the component tables to 
create the desired site 
width. Inside, there was 
a selection of tables 
broken down into smaller 
areas, ie sidebar, main 
content area - a 
technique still used 
today, except with div 
tags, of course. 




"A must-have upgrade" 

, Web Techniques says 
| new Features in After 
Effects £.0 deepen its 
appeal, 



Web Collection: 
web&ite in a box 

Adobe Photoshop, 
Illustrator, LiveMotion, 
and GoLive. 


Adebeannoun«i 

■Got asasonri? 

Adobe sponsors aiga 

Seattle conference 

Adobe receives Art 

■ Pif fl e 


Text images 

There was little use of 
web typography back at 
the beginning of the new 
millennium. To ensure 
text titles were all¬ 
browser compatible they 
were created using 
Photoshop. This meant 
when a new title was 
needed a new image 
had to be worked up. 


V UflMZ 


linup.j«K 


Web 
design I 
relic 


relic 


■ raining 
tvents * 
Adobe in 
Partnei pi 
Online iei 
Adobe w£ 
Job; and 


About Adobt.com ► 




Adobe 


Early days 

In 1996 the web was in its infancy and any company with a web 
presence was considered forward-thinking. This website was basic 
with a few images to help create the navigation and the main 
content area and a few standard links to products and services. 


_ 


New Dreams, 
New Year! 


ibp designers m 
Adobe wish yen 
the very best 
with a innulifitl 
1997 calendar 



! WtiiC* | Prado* n | folurinra | Snidla ; Sa pporr A -S-mrlcre : About Adah* | 


Intomntrnnal Pnfjn;: 
G03 ] 


DavraJ&Hl ifcc Ijkti 

L« i, uri,v f U3" h . 


Aitrly protect; nn-ikof 

AtasL iki Hi? 

Ateb* v 


C'.’f.,; C 1 SKkS Adobe >;■ iltnns 
All npbti m«Yrii 


www.adobe.com 


The software vendor has been powering web creatives for over two decades - 
here-we head back to the late Nineties to discover what they were up to 



Adobe is synonymous with software and services 
for creatives; anyone who knows design will 
know Photoshop, Dreamweaver and Flash. 

These packages have been the power force 
behind some of the best designs to have ever 
graced the web. However, the developer’s website 
has been far more functional and business-like than 
many of the creations built with its software. 


Over the last ten years the design of the site has 
gone through a series of incremental updates 
rather than any massive redesign and, on the 
surface, the latest version of the Adobe site is not 
that far removed from the 2001 iteration. The logo 
remains prominent in the top-left corner, while the 
overall branding, colour palette and icons are still 
reminiscent of yesteryear. 


The latest version of the Adobe site is 
not far removed from the2001iteration! 
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KiranaTama 

a RoR outsourcing company 


With years of experience, 100+ projects, and more than 
100 developers, we are a professionally-run outsourcing company. 
We are experts in custom-developing web applications using 

RoR + HTML5 + CSS3. 
You know the power of HTML5 and the possibilities it creates for 
your product, and you need a reliable partner, 
us to book your first reliable offshore programming services. 


Email: info@kiranatama.com 


Get ready 
for the future! 


GRAB your 
own <HTML> 5 


Web now! 




KiranaTama is our secret weapon. They are an invaluable resource for any 
start-up looking for high quality development at affordable prices. Time 
and time again, they go above and beyond in service and attention. 

I can throw any problem or question their way - multiple technologies, 
scaling and infrastructure... anything - and they will find a solution. 

My business simply would not exist without KiranaTama as a partner." 


Taryn Westberg - "Founder&CE0ofGio (glosite.com)" 


-Client of KiranaTama- 
















